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

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

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

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

• javascript
• reactjs
• react-router

Share Improve this question Follow asked May 21, 2018 at 11:45 zenithzenith 6511 gold badge11 silver badge99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

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

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

and export your Header ponent like this:

export default withRouter(Header);

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

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

move Header inside Router, only the ponent 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="/" ponent={Home} />
        <Route exact path="/post" ponent={PostList} />
        <Route path="/showpost/:slug" ponent={ShowPost} />
        <Route path="/page/:slug" ponent={ShowPage} />
        <Route path="/login" ponent={Login} />
        <Route path="/register" ponent={Register} />
        <Route path="/forgotpassword" ponent={Forgot} />
        <Route path="/password/reset/:token" ponent={Reset} />
        <Route path="/logout" ponent={Logout} />
        <Route path="/user" ponent={User} />
        <Route
          path="/saveorder"
          render={() => <SaveOrder data={this.state.data} />}
        />
      </div>
    </Router>
    <Map />
    <Footer />
  </div>