Реагировать на перенаправление маршрутизатора за пределы компонента маршрута

Question

Я использую React Router в своем приложении React.В компоненте Header, который не находится внутри компонента Router, я хочу перенаправить пользователя после регистрации формы, но поскольку компонент Header находится за пределами компонента Router, я не могу использовать this.props.history.push('/');.Как я могу перенаправить пользователя в компоненте Header?Это мой компонент приложения:

<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>

Answer 1

Переместить заголовок внутрь Router, только компонент, который находится внутри <Router>, который может использовать любой из адресов реагирующих маршрутизаторов.

код будет выглядеть следующим образом:

  <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>

Answer 2

Вы можете использовать this.props.history.push('/'), если ваш компонент Header передан в withRouter HOC.withRouter позволяет вам получать историю в подпорках компонента.

Итак ... в компоненте Header вы должны импортировать с помощью Router HOC

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

и экспортировать свой компонент Header следующим образом:

export default withRouter(Header);

Вы можете найти больше информации о программной навигации здесь https://tylermcginnis.com/react-router-programmatically-navigate/

пример того, что вы хотите сделать, находится в конце поста:)