CODEWITHSUNDEEP
javascriptreactjsreact-router
zenith
zenith

Reputation: 65

React router redirect outside of route component

I use React Router in my React application. In Header component that isn't inside Router component i want to redirect user after register a form, but because Header component is outside of Router component i can't use this.props.history.push('/');. How can i redirect user in Header component? This is my App component:

<div>
    <Header order={this.order}/>
    <Router data={this.state.data}>
      <div>
        <Menu data={this.state.data}/>
        <Route exact path="/" component={Home} />
        <Route exact path="/post" component={PostList} />
        <Route path="/showpost/:slug" component={ShowPost} />
        <Route path="/page/:slug" component={ShowPage} />
        <Route path="/login" component={Login} />
        <Route path="/register" component={Register} />
        <Route path="/forgotpassword" component={Forgot} />
        <Route path="/password/reset/:token" component={Reset} />
        <Route path="/logout" component={Logout} />
        <Route path="/user" component={User} />
        <Route path="/saveorder" render={()=><SaveOrder data={this.state.data}/>} />
      </div>
    </Router>
    <Map />
    <Footer />
  </div>

Upvotes: 3

Views: 12508

Answers (2)

Amine Hakkou
Amine Hakkou

Reputation: 574

move Header inside Router, only the component that are inside <Router> that can use any of react-router's apis.

the code would look like this:

  <div>
    <Router data={this.state.data}>
      <div>
        <Header order={this.order} />
        <Menu data={this.state.data} />
        <Route exact path="/" component={Home} />
        <Route exact path="/post" component={PostList} />
        <Route path="/showpost/:slug" component={ShowPost} />
        <Route path="/page/:slug" component={ShowPage} />
        <Route path="/login" component={Login} />
        <Route path="/register" component={Register} />
        <Route path="/forgotpassword" component={Forgot} />
        <Route path="/password/reset/:token" component={Reset} />
        <Route path="/logout" component={Logout} />
        <Route path="/user" component={User} />
        <Route
          path="/saveorder"
          render={() => <SaveOrder data={this.state.data} />}
        />
      </div>
    </Router>
    <Map />
    <Footer />
  </div>

Upvotes: 0

cbh6
cbh6

Reputation: 149

You can use this.props.history.push('/') if your Header component is passed to the withRouter HOC. withRouter allows you to get history in component props.

So... in Header component you should import withRouter HOC

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

and export your Header component like this:

export default withRouter(Header);

You can find more info about programmatic navigation here https://tylermcginnis.com/react-router-programmatically-navigate/

an example of what you want to do is found at the end of the post :)

Upvotes: 3

Related Questions