Question

我有一个简单的单页React应用程序设置，包含导航栏，内容和页脚。 Navbar本身由两个子导航栏组成：一个对于每个页面都是相同的，另一个应该根据路径动态更改（子页面导航栏）。

基本上，我有一个顶级组件Container：

<Navbar>
  <Navbar.Main/>
  <Navbar.Page/>
</Navbar>
{this.props.children}
<Footer/>

和在App中定义的路线：

<Router history={browserHistory}>
  <Route component={Container}>
    <IndexRoute component={Home} />
    <Route path="/" component={Home} />
    <Route path="/contact" component={Contact} />
    <Route path="/about" component={About} />
    <Route path="*" component={NotFound} />
  </Route>
</Router>

虽然页面内容会在{this.props.children}部分内发生变化，但我希望根据路线更改<Navbar.Page/>导航栏组件的内容（联系页面应包含特定于联系人的导航栏等））。

我知道我可以通过在页面中呈现页面导航栏轻松实现这一点，但我想继续在导航栏中进行渲染。

Answer 1

我们目前在项目中使用的一种方法是将组件props传递给Route组件并执行您想要执行的操作。

Quantity

首先我们知道我们可以将道具传递给路线，但另一件事是如何从组件中获取这些道具。

由于您可以在父容器组件中放置调试器并搜索道具，因此您可以看到Container组件中存在“routes”属性（aka this.props.routes）。

但是这里是脏东西，你必须知道组件相对于父路由器（也就是组件容器）的深度，以便你可以达到它。

例如，调试您的Container组件以查看可用的道具：

当我添加组件navBarPages时，我可以从Container到达这些对象：

List<Brain<T>>

请注意，当然，随着您的路线改变，您的this.props.routes将会改变。

React router：基于路由的导航栏内容

1 个答案: