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

Question

我有两个组件，它们都有一个开关元素，如下所示：

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

Answer 1

要添加有关@Miller 评论的更多信息，因为您添加exact到主路由 ( /tasks)，/tasks/:id因此永远无法访问嵌套的 Route ( )。

例如：如果你试图拥有完全相同 /tasks，你不能打与这条路线/tasks/1。

看看这里的exact工作原理

它应该可以exact在您的主要路线上没有。

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