嵌套开关在 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，任务页面不会显示！而如果我将完全相同的 Route 元素移动到 App 的 Switch 中，它就可以正常工作。

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

Answer 1

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

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

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

这个 link 可能会在视觉部分更好地帮助您：

https://github.com/ReactTraining/react-router/issues/6199 <<至尊！

Answer 2

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

示例：如果您尝试完全 /tasks，则无法使用 /tasks/1.

到达此路线

查看 exact 的工作原理 here

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

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

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

Nested Switch does not work in React router

javascript

reactjs

react-router

react-router-v4