具有不同内容的跨路由的通用组件

Question

我有一个名为的组件Header，它存在于所有路由中，而应用程序的其余部分则发生变化。为了实现这一点，我的主要渲染代码如下所示（使用 ES6）：

render(){
  return (
    <div>
      <Header></Header>
      <Router>
        <Route path="/" component={Home} />
        <Route path="/details/:id" component={Details} />
      </Router>
    </div>
  );
}

挑战在于，<Header>应该根据路线略有不同，例如每条路线都有一个唯一的标题。

如何才能实现这一目标？

Answer 1

这是助焊剂的一个很好的用例。您拥有在挂载时创建操作的路由处理程序。此操作进入 HeaderStore。Header 组件监听 Header 存储并根据它进行渲染。

您可以在此处查看一个示例：

• CurrentBoardStore保存当前页面信息
• BoardPage在安装/更新时更新商店
• SubBoardHeaderWrapper使用 CurrentBoardStore 中的数据呈现标头