Question

说我有以下App.js：

App.js

  render() {
    return (
      <div>
        <Navbar />
        <Router>
          <Home path="/" />
          <RouteA path="/routeA" />
          <RouteB path="/routeB" /> 
        </Router>
      </div>
    );
  }

因此，我需要<Navbar />的行为和在/routeA和/routeB中的外观不同。

例如，<Navbar />中有一个后退按钮。并且当用户位于/routeA中时，单击后btn将返回历史记录的上一步。

但是，当用户位于/routeB时，不仅单击btn现在会弹出警报，我们还需要渲染<Navbar />内部具有更新道具的组件。

所以我要解决的方法是redux：<Navbar />连接到商店中自己的状态片。然后，在我的路线中，为了使导航栏相应地动态，我用function和component分派了动作，以使<Navbar />表现出来并表现出我想要的方式。到目前为止一切顺利。

问题是我们无法序列化存储区中的“功能”和“组件”对象以及随后的本地存储...因此像刷新时一样，它们已消失...

所以我对“功能”的解决方法是立即在路由的构造函数中调度它。而对于“组件”，我在路由的Portal方法中使用render将其插入我的<Navbar /> ...

我的问题是，您将如何以不同的方式实现这一目标？

感谢您的阅读！

Answer 1

您可以发送函数以路由组件并在安装组件时调用此功能，您可以在NavBar组件中定义函数，然后根据所在页面进行切换。

updateLayout = (page) => {this.setState({currentPage: page})}
render() {
return (
  <div>
    <Navbar currentPage={this.state.currentPage} />
    <Router>
      <Home path="/" render={()=> <ComponentHome updateLayout={this.updateLayout}>} />
      <RouteA path="/routeA" render={()=> <ComponentA updateLayout={this.updateLayout}>} />
      <RouteB path="/routeB" render={()=> <ComponentB updateLayout={this.updateLayout}>} /> 
    </Router>
  </div>
);

}

导航栏具有动态内容和行为

1 个答案: