javascript - 是否可以使用 react 路由器将值从子路由传递到其父路由？

Question

比方说，我有一个带有页眉和正文的 MainLayout。使用 React 路由器，我在主体中渲染组件。

...
<header></header>
<main>{this.props.children}</main>
...

这是我当前的路由器:

<Route component={MainLayout} onEnter={requireCordova}>
   <Route path="/home" component={Home} />
   <Route path="/settings" component={Settings} />
</Route>

我的问题是我希望 MainLayout 从其子项之一获取标题(以填充页眉)，这可能吗？

<Route component={MainLayout} onEnter={requireCordova}>
   <Route path="/home" component={Home} title='homepage' />
   <Route path="/settings" component={Settings} title='settings'  />
</Route>

Answer 1

组件之间不能直接通信。您可能希望使用共享存储来满足此类需求 - 最流行的解决方案是 Redux .

要解决更新标题的具体问题 - 有一个简单的实用程序 react-helmet这简化了过程。

您可以在任何路由组件中简单地使用 Helmet 组件: <Helmet title="My Title" /> Helm 将负责更新您的头衔。它也适用于 HTML head 中的其他元素 - 例如。元数据、链接、脚本标签等。