How to make home path display from sub-route using React Router Dom?

Question

I want my site to display the same page for each of the above routes. Currently it displays nothing for www.mysite.com and www.mysite.com/

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Products />}>
          <Route path="/:id" element={<ProductDisplay />} />
        </Route>
      </Routes>
    </Router>
  );
}

Products component

function Products() {
  return (
    <div className="products">
      <Outlet />
    </div>
  );
}


export default Products;

Drew Reese · Accepted Answer · 2022-10-15 08:16:26Z

1

If you want the ProductDisplay component to render on "/" as well as "/:id" then render an additional index route that will match with the parent route path.

Example:

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Products />}>
          <Route index element={<ProductDisplay />} /> // <-- renders on "/"
          <Route path="/:id" element={<ProductDisplay />} />
        </Route>
      </Routes>
    </Router>
  );
}

See Index Routes for more details.

answered Oct 15, 2022 at 8:16

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ry2254 Over a year ago

I'm surprised that's the best way, I would have thought the DRY principle would mean you shouldn't do this? Thanks for taking the time to answer, I really appreciate it.

Drew Reese Over a year ago

@Ry2254 Welcome, glad to help. Yeah, RRDv6 was a bit of a departure from v5. You may also find this answer regarding optional parameters interesting, which is close to the use case you are describing. Cheers and good luck!

Ry2254 Over a year ago

Whats the best practice to handle my useParams getting a NaN on the index path?

Drew Reese Over a year ago

@Ry2254 Checking for a truthy id value. const { id } = useParams(); and if (id) { .....}. You could also use the destructuring assignment to assign a fallback value, i.e. const { id = "the fallback value" } = useParams();.

Ry2254 Over a year ago

Thanks for the answer, I did this: const { id = 1 } = useParams();

|

Collectives™ on Stack Overflow

How to make home path display from sub-route using React Router Dom?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related