Question 251751 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Nested <Routes> in ReactJs

I decide whether to render Foo page or Bar page by route, but Foo page itself has two sub-routes for components to render based on the url path, like FooOne or FooTwo. So I effectively have two layers of routes: Routes > Route > Routes > Route

function FooTwo() {
  return <div>FooTwo</div>
}

function FooOne() {
  return <div>FooOne</div>
}

function Foo() {
  return (
    <Routes>
      <Route path="/foo/foo-one" element={<FooOne />} />
      <Route path="/foo/foo-two" element={<FooTwo />} />
    </Routes>
  )
}

function App {
  return (
    <Routes>
      <Route path="/foo/*" element={<Foo />} />
      <Route path="/bar/*" element={<Bar />} />
    </Routes>
  )
}

Can I do nested routes like this in React? Is it acceptable, professional practice, or is there a better way?

Tags:

2

Answers


  1. 0

    In React using React Router, nesting routes, as demonstrated in your code, is a common and acceptable practice. This approach allows for the organization of routes and components in a hierarchical manner, making it suitable for handling complex layouts and multi-layered navigation. However, it’s important to ensure that the nesting aligns with your application’s design and user experience needs. If the nesting becomes overly complex, consider simplification or alternative approaches, but in most cases, nested routes are a practical and maintainable solution.

    Login or Signup to reply.
  2. 0

    Can I do nested routes like this in React? Is it acceptable,
    professional practice, or is there a better way?

    Yes, the pattern is perfectly acceptable and "professional". It’s an intended use case.

    However

    What you have code are what are called descendent routes. You’ve an issue with the descendent route paths though. Descendent routes are built relative to the parent route, so if Foo is rendering descendent routes on paths "/foo/foo-one" and "/foo/foo-two" then the resulting route paths is actually "/foo/foo/foo-one" and "/foo/foo/foo-two". Foo just needs to specify the sub-routes, e.g. remove the leading "/foo" path segment.

    function Foo() {
  return (
    <Routes>
      <Route path="/foo-one" element={<FooOne />} /> // "/foo/foo-one"
      <Route path="/foo-two" element={<FooTwo />} /> // "/foo/foo-two"
    </Routes>
  );
}

function App {
  return (
    <Routes>
      <Route path="/foo/*" element={<Foo />} />
      <Route path="/bar/*" element={<Bar />} />
    </Routes>
  );
}

    If you wanted to use nested routes, e.g. Route components rendered directly as children of other Route components, then your code could look like the following.

    function App {
  return (
    <Routes>
      <Route path="/foo">
        <Route path="foo-one" element={<FooOne />} /> // "/foo/foo-one"
        <Route path="foo-two" element={<FooTwo />} /> // "/foo/foo-two"
      </Route>
      <Route path="/bar/*" element={<Bar />} />
    </Routes>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search