CODEWITHSUNDEEP
reactjsreact-router
illiteratewriter
illiteratewriter

Reputation: 4333

Rerouting inside a React component

render() {
 if(this.state.verified){
  return(<div>Verified</div>)
 }else {
   return(<Redirect to='/'/>)
 }
}

This is producing an error < Redirect> elements are for router configuration only and should not be rendered

This is how i understood rerouting should be done from react router docs. What is wrong with the code above and how should conditional re-routing done in react?

Upvotes: 1

Views: 573

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281932

From the error that you are getting, I am assuming that you are using a react-router version < v4. Before version 4, Redirect & Route components can only be children of Router component and can't be nested within the components. In those cases what you would need to do is to programmatically redirect to a different Route

componentWillUpdate(nextProps, nextState) {
    if(nextState.verified !== this.state.verified && !nextState.verified) { 
       //Programmatically Route here
    }
}
render() {
 if(this.state.verified){
  return(<div>Verified</div>)
 }
}

Check this on how to Programmatically change routes with react-router

Upvotes: 1

rainkinz
rainkinz

Reputation: 10393

I'm guessing the problem is that the component you're calling this method in is not being used inside of a ReactRouter. i.e. if your component is called MyComponent it should be called inside of the application router something like this:

const RoutedApp = () => (
  <BrowserRouter >
    <Switch>
      <Route path="/my_component" component={MyComponent} />
    </Switch>
  </BrowserRouter>
);
ReactDOM.render(<RoutedApp />, root);

Upvotes: 0

Related Questions