在嵌套的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>
嘗試一下
<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#中加入Outletimport { Link, Outlet } from "react-router-dom"; export default function Main() { return ( <div> <p>Main Page</p> <Link to="/app/ashish">点击进入用户页面</Link> <Outlet/> </div> ); }