React Router v4 嵌套路由更改整个内容

Question

我一直在尝试了解如何将嵌套路由的概念应用于我的范围。

我需要这些路线：

/projects

• 标题
• 列表
• NavLink 到 /projects/new

这条路线将有一个项目列表和一个用于创建新项目的按钮。

/projects/new

• 表格
• NavLink 关闭并转到 /projects

调用该路由时，内容上方会出现一个面板，不会改变页面项目。

/projects/:projectId/dashboard

• 仪表板标题
• 项目列表

当一个项目被选中时，我需要在一个全新的页面中显示它的仪表板，与 /projects 不同

我的反应路线配置：

<Switch>
  <Route exact path='/home' component={Home}/>
  <Route path='/home' component={Home}/>
  <Route path='/projects' component={Projects} />
  <Redirect to="/home" push />
</Switch>

我在项目内的渲染接收另一条路线：

<section className='content projects'>
  <div>
    <h3>List</h3>
    <ul>{list}</ul>
  </div>

  <Route path='/projects/new' render={
    () => {
      return <div>
        <h3>New Project</h3>
        <form action="#">
          <input type="text" placeholder='Contract name'/>
          <input type="text" placeholder='Project name'/>
          <button type="submit">Create</button>
        </form>
        <NavLink to='/projects'>Close</NavLink>
      </div>
    }
  } />
</section>

现在，我应该把这条路线放在哪里：

<Route path='/projects/:projectId/dashboard' component={Dashboard} />

我想如果我把开关放在里面，就可以了，但是页面变成了空白。

谁能帮我解决这个问题？ =)

谢谢！

---

更新 1

我试图将我的仪表板路线准确地放在 /projects 之上。 现在我得到一个空白内容，它应该出现在仪表板组件的位置。项目路线依然正常。

<Switch>
  <Route exact path='/' component={Home}/>
  <Route exact path='/projects/:projectId/dashboard' render={ () => {
      return <h2>Dashboard</h2>
  }} />
  <Route path='/projects' component={Projects} />
  <Redirect to="/home" push />
</Switch>

---

更新 2

我创建了一个单独的项目，它工作与本主题中的答案。现在我将尝试弄清楚为什么它在我有空白页的项目中不起作用。

Answer 1

尝试将 exact 属性添加到 Route 并确保它出现在 /projects 之前的 Switch 中：

<Switch>
  <Route exact path='/home' component={Home}/>
  <Route path='/home' component={Home}/>
  <Route exact path='/projects/:projectId/dashboard' component={Dashboard} />
  <Route path='/projects' component={Projects} />
  <Redirect to="/home" push />
</Switch>

发生的情况是您的第一个 /projects 匹配任何以 /projects 开头的路由。添加exact 属性将确保如果路由完全匹配/projects/:projectId/dashboard，它将呈现Dashboard。