Question

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

登录（/）
仪表板（/仪表板）
项目（/项目）

我希望Dashboard和Project页面有一个标题，但是Login页面不应该有任何标题。

目前路线如下：

<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}>是完全合法的。

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

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

1 个答案: