Question

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

我需要这些路线：

/项目

标题
列表
NavLink 改为/ projects / new

此路线将包含项目列表和创建新项目的按钮。

/项目/新

表格
NavLink 关闭并转到/ projects

当调用此路线时，会在内容上方显示一个面板，它不会更改页面项目。

/项目/：专案编号/仪表板

仪表板标题
项目清单

选择项目后，我需要在一个全新的页面中显示其仪表板，不同于/ 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

我试着把我的仪表板路线放在/ project之上。现在我得到一个空白内容，它应该出现在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道具添加到道路中，并确保它在/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。

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

1 个答案: