javascript - 嵌套开关在 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)永远无法到达。

示例:如果您尝试完全/tasks，则无法使用/tasks/1到达此路线。

了解 exact 的工作原理 here

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

您想要实现的类似示例:https://v5.reactrouter.com/web/example/route-config