React Router - 为不相关的路由指定父组件答案

【问题标题】：React Router - Specify parent component for unrelated routesReact Router - 为不相关的路由指定父组件
【发布时间】：2017-05-24 08:47:09
【问题描述】：

我的 React 应用中有 3 个页面以及以下路线：

登录 (/)
仪表板 (/dashboard)
项目 (/projects)

我希望仪表板和项目页面有标题，但登录页面不应该有任何标题。

目前的路线是这样的：

<Router>
    <Route path="/" component={Login}>
    <Route path="/dashboard" component={Dashboard} />
    <Route path="/projects" component={Projects} />
</Router>

我创建了一个名为Shell 的组件，它只提供标题。如何设置我的路由器，使 Shell 成为 Dashboard 和 Projects 而不是 Login 页面的父组件？

编辑 1

我想知道是否可以使用这样的无路径父级来围绕子组件渲染 Shell：

<Router>
    <Route path="/" component={Login}>
    <Route component={Shell}>
        <Route path="/dashboard" component={Dashboard} />
        <Route path="/projects" component={Projects} />
    </Route>
</Router>

编辑 2

刚刚尝试了上面的更改，它可以工作！阅读文档，path 不是必需的道具。所以在上面的代码中<Route component={Shell}> 是完全合法的。

【问题讨论】：

您的路线设置对于您想要做的事情是正确的。您只需在 Dashboard 和 Project 中呈现标题。
是的，但是我想知道是否有任何方法可以使用嵌套路由功能，以便父组件可以渲染标题，而子组件不必担心。

标签： reactjs react-router

【解决方案1】：

您在编辑 1 中的内容是正确的。

<Router>
  <Route component={Login}>
  <Route component={Shell}>
    <Route path="/dashboard" component={Dashboard} />
    <Route path="/projects" component={Projects} />
  </Route>
</Router>

在你的<Shell> 组件中，你可以这样做：

import Header from './Header';

...

render() {
  return (
    <div id="shell">
      <Header />
      {this.props.children}
    </div>
  );
}
...

【讨论】：