how can we achieve redirect using react-router-dom?

Question

I tried using

<Redirect to = 'loginPage' />

but it is not redirecting me anywhere. what should i do?

Please help me

test by adding / to loginPage like this another solution is to use browserHistory push. Google it you will find tons of examples — Niraj Raskoti, Apr 30 '18 at 08:43
Redirect component needs to be rendered in order for it to work, if you are using in class methods, you can refer https://stackoverflow.com/questions/44127739/programmatically-navigate-using-react-router/44128108#44128108 — Shubham Khatri, Apr 30 '18 at 10:23
Possible duplicate of [How to use Redirect in the new react-router-dom of Reactjs](https://stackoverflow.com/questions/43230194/how-to-use-redirect-in-the-new-react-router-dom-of-reactjs) — Striped, Apr 30 '18 at 11:09

score 0 · Answer 1 · edited Apr 30 '18 at 09:40

You have two options to redirect:

Option 1:

Using <Redirect /> like in this example:

<Redirect
  to={{
    pathname: '/loginpage'
  }}
/>

This option works most of the times except for component lifecycle methods, such as ComponentDidMount where you need to opt for the second option below.

Option 2:

Using this.props.history.push("/loginpage"); like in this example:

  componentDidUpdate() {
    if (this.props.authenticated === false) {
      this.props.history.push("/loginpage");
    }
  }

Note that to use this option, the component must be a child component of <BrowserRouter />. Otherwise, you have to use the withRouter() HOC like in this example:

myComponent = withRouter(
  ServicePlanSelect
);

how can we achieve redirect using react-router-dom?

1 Answers1