React Router v6 不適用於 URL Slugs

Question

我正在嘗試使用簡單的 url: /user/{name} 使 react-router-dom 工作，但由於某種原因無法讓它加載帶有 url 名稱的頁面。

這是我的 App function 組件的返回：

    <>
      <MainNavBar navigation={navigation} />
      <Routes>
        <Route index={true} element={<Home />} exact />
        <Route path="user" element={<User />} exact>
          <Route
            path=":name"
            render={
              ({ match: { params: { name } } }) => {
                console.log(name);
                console.log("test2");
                return (<UserPage
                  userName={name}
                />);
              }}
          />
        </Route>
        <Route path="*" element={<PageNotFound />} />
      </Routes>
    </>

這是用戶組件； 我的調試 atm 的占位符。

const User = () => (
  <div>
    <header className="App-header">
      <Outlet />
    </header>
  </div>
);

當我從 go 到 http://localhost:3000/user/test 它加載User組件而不是子組件（Outlet/UserPage 元素）

我已經嘗試了很多組合，但似乎做錯了什么，所以任何幫助將不勝感激。 謝謝！

Answer 1

在react-router-dom v6 中， Route組件不再具有render或component道具，它們在element道具上渲染其組件。 使用useParams掛鈎訪問路由匹配參數。 如果UserPage是不能使用 React 鈎子的組件，則使用包裝器 function 組件來訪問路由匹配參數並將其作為道具傳遞。

const UserPageWrapper = () => {
  const { name } = useParams();
  useEffect(() => {
    console.log({ name }); // <-- log param in effect
  }, [name]);
  return <UserPage userName={name} />;
};

...

<>
  <MainNavBar navigation={navigation} />
  <Routes>
    <Route index element={<Home />} />
    <Route path="user" element={<User />}>
      <Route path=":name" element={<UserPageWrapper />} />
    </Route>
    <Route path="*" element={<PageNotFound />} />
  </Routes>
</>