Javascript 嵌套交换机在React路由器中不工作

我有两个组件，它们都有这样一个开关元件：

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>
  );
}

函数应用程序（）{
返回(
我认为您误解了Switch语句和路由的概念。（）

然而，你应该直接在App.js中声明你的所有路由。如果你想为某个路由重定向用户，只需使用NavLink。此外，你不能嵌套交换机！！！你也可以只嵌套路由

因此，这可能是所有问题的原因。请尝试创建嵌套路由

此链接可能在视觉部分对您有更好的帮助：


若要添加有关@Miller comment的更多信息，因为您将
exact
添加到主路线（
/tasks
），所以无法访问嵌套路线（
/tasks/：id
）

示例：如果您试图准确地执行
/tasks
，则无法使用
/tasks/1
点击此路线

查看
exact
的工作原理

它应该在主路线上没有
精确的
的情况下工作

类似于您想要实现的示例：
您正在向两条路径添加
/exact
。
/tasks/1
与
/tasks
不完全一致，我认为Miller是对的，如果您说只有
/tasks/1
完全匹配
/tasks
，才应该渲染该路径，那么您希望
/tasks/1
如何渲染呢精确到/tasks/：id，不是吗？/tasks/1不呈现TaskPage，但/tasks呈现TasksPage（我知道命名错误）它永远不会到达那个点，因为TasksPage不会呈现哦，是的，我现在明白了。TaskPage只在呈现TasksPage的情况下呈现。而且由于两条路由从来都不完全匹配，所以没有显示您实际上不必在一个地方声明路由或交换机，这是“声明式路由”的卖点之一他肯定能在开关里面做开关。
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>
    );
}