React Router v4 Redirecting on form submit

Question

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> ); 

Answer 1

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    } 

Answer 2

I am now able to redirect to the "homepage" by swapping out <Redirect to="/home" /> with this.props.history.push("/home"); using withRouter. Not sure why the first way would not work though.