Penghala React Penghala bersarang dan penggunaan parameter carian

Question

Apabila menggunakan parameter carian dalam laluan React bersarang, apabila saya menggunakan /app dan selepas mengklik pautan yang menavigasi ke /app/user, navigasi tidak berfungsi.

Kalau saya cuba guna tanpa bersarang memang berkesan. Tetapi mengapa ia tidak berfungsi apabila bersarang.

Kotak kod: pautan CodeSandBox

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

Answer 1

Cubalah

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

---

Jika anda mahu 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>
  );
}