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

发布时间：2020-12-15 16:18:16 所属栏目：百科来源：网络整理

导读：我的React App中有3个页面以及以下路径：登录(/) 仪表板(/仪表板) 项目(/项目) 我希望仪表板和项目页面有一个标题,但登录页面不应该有任何标题. 目前路线看起来像这样： Router Route path="/" component={Login} Route path="/dashboard" component={Dashb

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!