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

Question

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

小例子：

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

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

感谢您的建议

Answer 1

问题

看看浏览器控制台，它会告诉你：

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

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

更新（感谢 Drew Reese）：

在 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>

编辑codesandbox