React Router 嵌套路由与搜索参数的使用-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

React Router 嵌套路由与搜索参数的使用

P粉541796322 2024-04-05 13:48:33

[React讨论组]

1777

在嵌套的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

全部回复(1)

P粉4641130782024-04-06 00:10:01 1楼

尝试一下

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