React Router Nested Routing with Search Params

Question

In nested React routing with search params, when I am on /app and after clicking on Link which navigates to /app/user. Navigation is not working.

If I am trying it without nesting, it is working but. But why it is not working when I am nesting it.

Codesandbox: CodeSandBox Link

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

buga · Accepted Answer · 2023-07-27T08:53:30.103

4

try this

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

If you want the User.js component to be nested, you need to add Outlet in Main.js

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

export default function Main() {
  return (
    <div>
      <p>Main Page</p>
      <Link to="/app/ashish">Click to go to user page</Link>

      <Outlet/>
    </div>
  );
}

edited Jul 27 '23 at 08:53

answered Jul 27 '23 at 08:30

buga

367
2
15

Hi @buga Its working. My question is why it is not working, when nesting is there. – Ashish Gahlot Jul 27 '23 at 08:33
@AshishGahlot you need to add `Outlet` for it to be nested. I edited my answer to showcase. – buga Jul 27 '23 at 08:54

React Router Nested Routing with Search Params

1 Answers1