嵌套开关在 React 路由器中不起作用答案

【问题标题】：Nested Switch does not work in React router嵌套开关在 React 路由器中不起作用
【发布时间】：2019-10-02 14:27:52
【问题描述】：

我有两个组件都有这样的开关元素：

function App() {
  return (
    <div className="App">
    <Router>
        <AppBar position="static" color="inherit">
          <Toolbar>
            <Button color="inherit"><Link to="/deployments">Deployments</Link></Button>
            <Button color="inherit"><Link to="/tasks">Tasks</Link></Button>
          </Toolbar>
        </AppBar>
        <Switch>
          <Route exact path="/tasks" component={TasksPage}>
          </Route>
        </Switch>
    </Router>
    </div>
  );
}

function TasksPage({match}) {
    return (
        <div className="DeploymentsPage">
          {loading ? <h1>Loading...</h1> : 
          <div>
            <h1>Available Tasks</h1>
            <ul>
              {tasks.map((el, i) => <li key={i}><Link to={`${match.path}/${el.id}`}>{el.id}</Link></li>)}
            </ul>
            </div>
          }
         <Switch>
          <Route exact path="/tasks/:id" component={TaskPage} />
         </Switch> 
        </div>
    );
}

如果我现在去/tasks/1，TaskPage 不会显示！而如果我将完全相同的 Route 元素移动到 App 的 Switch 中，它就可以正常工作。

这是为什么呢？我尝试按照本教程进行操作：https://reacttraining.com/react-router/web/guides/quick-start

【问题讨论】：

您将exact 添加到两个路径。 /tasks/1 与 /tasks 不完全相同
我认为 Miller 是对的，如果您说该路由仅在 exactly 与 /tasks 匹配时才应渲染，您希望 /tasks/1 如何渲染？
但是 /tasks/1 与 /tasks/:id 完全一致，不是吗？ /tasks/1 不呈现 TaskPage，但 /tasks 呈现 TasksPage（我知道命名不好）
因为TasksPage 不会呈现，所以它永远不会达到这一点
哦，是的，我现在明白了。 TaskPage 仅在呈现 TasksPage 时呈现。而且由于两条路线从未完全匹配，因此未显示

标签： javascript reactjs react-router react-router-v4

【解决方案1】：

要添加有关@Miller 评论的更多信息，因为您将exact 添加到您的主路由（/tasks），您的嵌套路由（/tasks/:id）永远无法到达。

示例：如果您尝试完全 /tasks，则无法使用/tasks/1 访问此路线。

了解exact 的工作原理here

它应该可以在您的主要路线上没有 exact 的情况下工作。

您想要实现的类似示例：https://reacttraining.com/react-router/web/example/route-config

【讨论】：

【解决方案2】：

我认为您误解了 Switch 语句和路由的概念。 (https://reacttraining.com/react-router/web/guides/quick-start)

不过，例如，您应该将所有路由直接声明到 App.js 中。而且，如果您想将用户重定向到某个路线，只需使用 NavLink。而且，你不能嵌套开关！！！你也可以只嵌套路由。

因此，这可能是您所有麻烦的原因。尝试创建一个嵌套路由。

此链接可能会在视觉部分为您提供更好的帮助：

React Router v4 Nested Routes with Switch

https://github.com/ReactTraining/react-router/issues/6199

【讨论】：

其实你不必在一个地方声明你的Routes或者Switches，这是“声明式路由”的卖点之一
他绝对可以在switch里面做switch。