内容不同的路线之间的共同组成部分

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中的数据呈现标头