Brand new to react, Attempting to redirect to a "homepage" after clicking submit on a "login" page. Tried to follow the react router tutorial.
When I click the submit button on the form and console log the state and fakeAuth.isAuthenticated, they both return true. However, the redirect is not firing.
Login.js
class Login extends Component {
constructor(props) {
super(props);
this.state = {
portalId: "",
password: "",
redirectToReferrer: false
}
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
fakeAuth.authenticate(() => {
this.setState({
portalId: this.refs.portalId.value,
password: this.refs.password.value,
redirectToReferrer: true
})
})
e.preventDefault();
}
render() {
const redirectToReferrer = this.state.redirectToReferrer;
if (redirectToReferrer === true) {
<Redirect to="/home" />
}
Routes.js
export const fakeAuth = {
isAuthenticated: false,
authenticate(cb) {
this.isAuthenticated = true
setTimeout(cb, 100)
},
signout(cb) {
this.isAuthenticated = false
setTimeout(cb, 100)
}
}
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={() => (
fakeAuth.isAuthenticated === true
? <Component {...this.props}/>
: <Redirect to="/" />
)}/>
)
export default () => (
<BrowserRouter>
<div>
<Navbar />
<Switch>
<Route path="/" exact component={Login} />
<Route path="/register" exact component={Register} />
<Route path="/home" exact component={Home} />
</Switch>
</div>
</BrowserRouter>
);
You have to return Redirect
in render method (otherwise it will not be rendered and as a result redirection will not happen):
render() {
const redirectToReferrer = this.state.redirectToReferrer;
if (redirectToReferrer) {
return <Redirect to="/home" />
}
// ... rest of render method code
}