是否可以使用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

您无法直接在组件之间进行通信。您可能希望使用共享存储来满足此类要求 - 最常用的解决方案是this。

要解决更新标题的具体问题，可以使用简单的实用程序Redux来简化过程。

您可以在任何路径组件中使用Helmet组件： <Helmet title="My Title" />和头盔将负责更新您的头衔。它适用于HTML头中的其他元素 - 例如。元，链接，脚本标签等。