React Router 巢狀路由與搜尋參數的使用
P粉541796322
P粉541796322 2024-04-05 13:48:33
0
1
1544

在嵌套的React路由中使用搜尋參數時,當我在/app上,點擊導航到/app/user的連結後,導航不起作用。

如果我嘗試不嵌套使用,它是可以工作的。但為什麼在嵌套時它不起作用。

Codesandbox: CodeSandBox連結

<Routes>
    <Route path="/" element={<LandingPage />} />
    <Route path="/app" element={<Main />}>
      <Route path=":user" element={<User />} />
    </Route>
    <Route path="*" element={<PageNotFound />} />
  </Routes>
P粉541796322
P粉541796322

全部回覆(1)
P粉464113078

嘗試一下

<Routes>
        <Route path="/" element={<LandingPage />} />
        <Route path="/app" element={<Main />} />
        <Route path="/app/:user" element={<User />} />
        <Route path="*" element={<PageNotFound />} />
      </Routes>

如果你想將User.js元件嵌套,你需要在Main.js#中加入Outlet

import { Link, Outlet } from "react-router-dom";

export default function Main() {
  return (
    <div>
      <p>Main Page</p>
      <Link to="/app/ashish">点击进入用户页面</Link>

      <Outlet/>
    </div>
  );
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!