时间戳

首页 > 解决方案 > 如何导航到 React Router Dom V6 中的嵌套路由

javascript - 如何导航到 React Router Dom V6 中的嵌套路由

问题描述

我正在尝试从导航元素中打开嵌套路由。应用程序本身在 /app 下运行（因此我将任何不存在的 URL 重定向到 /app）。在 /app Route 内呈现的布局组件中，我正在创建主导航以及最终应该是内容的 Routes。但是，一旦我单击“搜索”或“查看”，URL 就会更改为正确的路径，但会立即将我重定向到 /app，就好像“搜索”和“查看”路由本身不存在一样。

最小的例子：

https://codesandbox.io/s/fragrant-field-ygwbf

应用程序.tsx

 <BrowserRouter>
    <Routes>
       <Route path="/app" element={<Layout />} />
       <Route path="*" element={<Navigate to="/app" />} />
    </Routes>
 </BrowserRouter>

布局.tsx

const Layout = () => {
  const navigate = useNavigate();
  const handleSearchClick = (e: any) => {
    e.preventDefault();
    // do some tasks
    navigate("inventory/search");
  };

  const handleViewClick = (e: any) => {
    e.preventDefault();
    // do some tasks
    navigate("inventory/view");
  };

  return (
    <div>
      <nav>
        <button onClick={handleSearchClick}>Search</button>
        <button onClick={handleViewClick}>View</button>
      </nav>
      <Routes>
        <Route path="/users">
          <Route path="about" element={<p>example</p>} />
        </Route>
        <Route path="/inventory">
          <Route path="search" element={<Search />} />
          <Route path="view" element={<View />} />
        </Route>
      </Routes>
      The content of search / view should now be displayed below the
      Buttons
    </div>
  );
};

感谢您的任何建议

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

问题

看一下浏览器控制台，它会显示：

您在“/app”（在 下）呈现后代（或称为useRoutes()），但父路由路径没有尾随“*”。这意味着如果您导航得更深，父路由将不再匹配，因此子路由将永远不会呈现。

因此，嵌套路由（根据文档进行更深入的导航）将永远不会呈现，并且您看不到SearchandView子路由。

更新（感谢德鲁里斯）：

在 v6 中，所有路由路径始终完全匹配，不再像 v4/5 中那样匹配路径前缀。父/根路径需要指定 * 通配符，以便它们现在可以“前缀”匹配。

解决方案

请将父级更改<Route path="/app">为<Route path="/app/*">.

所以在App.tsx：

<BrowserRouter>
    <Routes>
       <Route path="/app/*" element={<Layout />} />
       <Route path="*" element={<Navigate to="/app" />} />
    </Routes>
 </BrowserRouter>

在代码框上编辑

推荐阅读