reactjs – React Router – 为不相关的路由指定父组件

我的React App中有3个页面以及以下路径：

>登录(/)
>仪表板(/仪表板)
>项目(/项目)

我希望仪表板和项目页面有一个标题,但登录页面不应该有任何标题.

目前路线看起来像这样：

<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

刚试过上面的改变就行了！阅读文档,路径不是必需的道具.所以在上面的代码中< Route component = {Shell}>是完全合法的.

编辑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>
  );
}
...