javascript - React Router v4 嵌套路由改变整个内容

Question

我一直在努力理解如何将嵌套路由的概念应用到我的范围。

我需要这些路线:

/项目

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

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

/projects/new

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

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

/projects/:projectId/dashboard

• 仪表板标题
• 项目 list

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

我的 react 路线配置:

<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 之上，并且精确。现在我在 Dashboard 组件应该出现的地方得到了一个空白内容。项目路线仍在正常运行。

<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 并确保它出现在 Switch 中的 /projects 之前:

<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。