React Router v4 Redirect not working

Question

I have a route which redirects after checking a condition like this

(
Store.isFirstTime ? 

        

Answer 1

You should render only Redirect in your render method:

render() {
  return (<Redirect to="/" />);
}

but here is my favorite solution without using the Redirect component

1. import import { withRouter } from 'react-router-dom';
   
2. export default withRouter(MyComponent);
3. Finally, in your action method, assume that handlingButtonClick

handlingButtonClick = () => {
  this.props.history.push("/") //doing redirect here.
}

Answer 2

The asker posted an issue on GitHub, and got this apparently unpublished hidden guide (edit: now published) that helped me out too. I'm posting it here because I ran into the same problem and want others to avoid our pain.

The problem is that mobx-react and react-redux both supply their own shouldComponentUpdate() functions that only check for prop changes, but react-router sends state down through the context. When the location changes, it doesn't change any props, so it doesn't trigger an update.

The way around this is to pass the location down as a prop. The above guide lists several ways to do that, but the easiest is to just wrap the container with the withRouter() higher order component:

export default withRouter(observer(MyComponent))

or, for redux:

export default withRouter(connect(mapStateToProps)(MyComponent))

Answer 3

I have problem with <Redirct /> and finally i found that <Redirect /> have to not be inside <Switch></Switch> tags.

Answer 4

Be careful when composing the Router with other components like translation providers, theme providers, etc .. After some time I found that your App has to be strictly wrapped by the Router, like this:

<Provider store={store}>
  <ThemeProvider theme={theme}>
    <TranslationProvider
      namespaces={['Common', 'Rental']}
      translations={translations}
      defaultNS={'Common'}
    >
      <Router>
        <App />
      </Router>
    </TranslationProvider>
  </ThemeProvider>
</Provider>

Hope this helps somebody

Answer 5

You're missing a / in front of intro

<Route exact path="/" render={()=>(
  Store.isFirstTime ? <Redirect to="/intro" /> : <Home state={Store} />         
)} />

Answer 6

you can try this way like:

first: import "withRouter" to component like this:

import { withRouter } from "react-router-dom";

then at the end of your component export compoenent like this:

export default withRouter(VerifyCode);

and then you can add this code to your function:

 verify(e) {
    // after sever get 200
    this.props.history.push('/me/');
}

good luck