Javascript 在路由组件外部响应路由器重定向

我在React应用程序中使用React路由器。 在不在路由器组件内的Header组件中，我想在注册表单后重定向用户，但由于Header组件在路由器组件外，我无法使用

this.props.history.push（'/'）。
如何在标头组件中重定向用户？
这是我的应用程序组件：

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


} />
如果将头组件传递给withRouter，则可以使用
this.props.history.push（'/'）
。
withRouter允许您在组件道具中获取历史记录

所以。。。在Header组件中，您应该使用Router HOC导入

从“react router dom”导入{withRouter}

并按如下方式导出标题组件：

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

使用路由器导出默认值（标题）

您可以在此处找到有关编程导航的更多信息

你想做的一个例子可以在文章的末尾找到：）
在
路由器
中移动标题，只有
中的组件可以使用任何react路由器的API

代码如下所示：

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


}
/>
我不想在每次路由器url更改时都更改页眉和页脚，所以我将其从路由器组件中排除。只要您告诉它不要更改，它就不会更改。通过实现shouldComponentUpdate（），您可以给我更多关于如何实现shouldComponentUpdate（）的提示吗。这意味着，如果用户单击任何链接，我可以选择哪个组件应该重新呈现？React router足够聪明，可以这样做，并且考虑到您将标头移动到路由器外部是因为您不希望每次单击时标头都发生更改，只要shouldComponentUpdate返回false，就不会发生此情况，有关更多详细信息，请参阅此页“我得到错误”“您不应该在路由器外使用或withRouter（）”，然后您应该像@AmineHakkou所说的那样将标题放在路由器内。或者使用包含您作为孩子的路由的容器组件。这样，您的标题也将放在路由器内，以便您可以访问历史记录