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

Question

我正在嘗試從導航元素中打開嵌套路由。 應用程序本身在 /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>
  );
};

感謝您的任何建議

Answer 1

問題

看看瀏覽器控制台，它會顯示：

您在“/app”（下）處呈現后代（或稱為useRoutes() ），但父路由路徑沒有尾隨“*”。 這意味着如果您更深入地導航，父路由將不再匹配，因此子路由將永遠不會呈現。

因此，嵌套路由（根據文檔進行更深入的導航）將永遠不會呈現，您將看不到Search和View子路由。

解決方案

請將父<Route path="/app">更改為<Route path="/app/*"> 。

所以在App.tsx ：

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

在代碼和框上編輯