具有不同内容的跨路由的公共组件 [英] Common component across routes with different content

问题描述

我有一个名为 Header 的组件，它存在于所有路由中，而应用程序的其余部分会发生变化.所以为了实现这一点，我的主要渲染代码看起来像这样(使用 ES6):

render(){返回 (<div><标题></标题><路由器><Route path="/" component={Home}/><Route path="/details/:id" component={Details}/></路由器>

);}

挑战在于

的内容应根据路线略有不同，例如每条路线的唯一标题.

如何实现?

解决方案

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

你可以在这里看到一个例子:

• CurrentBoardStore 保存当前页面信息
• BoardPage 在挂载/更新时更新商店
• SubBoardHeaderWrapper 使用来自 CurrentBoardStore 的数据呈现标题

I have a component called Header which exists across all routes, while the rest of the app changes. So to accomplish this, my main render code looks about like this (using ES6):

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

The challenge is that the contents of the <Header> should vary slightly depending on the route, for example a unique title per route.

How can this be achieved?

解决方案

This is a good use case for flux. You have route handlers that create an action when they mount. This action goes into the HeaderStore. The Header component listens to the Header store and renders based on it.

You can see an example of this here:

• CurrentBoardStore holds the current page info
• BoardPage updates the store when it mounts/updates
• SubBoardHeaderWrapper renders the header with data from CurrentBoardStore

这篇关于具有不同内容的跨路由的公共组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！