Dynamic routing with react-roter-dom v6 problem

Question

I am trying to link up a component by a button in another component. I tried this way.

in app.js file

<Route path="/portfolio" element={<Portfolio />}>
    <Route path=":id" element={<SingleProject />} />
</Route>

and in the portfolio component,

<Link to={`/portfolio/${dt.id}`} className="text-2xl text-red-100 borde border-coral px-2 block text-center"><i class="fas fa-info-circle" title="Details"></i></Link>

But unfortunately it's not working! every time I clicked on the button, it show me the portfolio component. not specific dynamic page. which should be loaded. How can I fix the problem?

When the routes are wrapped like this the `Portfolio` component is treated as a layout/wrapper component and is still rendered when nested routes match. Are you wanting to display both the `Portfolio` and `SingleProject` components at the same time or only one or the other? — Drew Reese, Dec 02 '21 at 19:22
@DrewReese I want to render only one. In Portfolio component I have displayed a few projects of mine. and added a button for details. by clicking which user will be redirected to the details page of the specific project he/she clicked. — Md Nasir Ahmed, Dec 02 '21 at 19:29

Drew Reese · Answer 1 · 2021-12-02T19:54:55.913

When the routes are wrapped like this the Portfolio component is treated as a layout/wrapper component and is still rendered when nested routes match. Since you want to render each independently on their own routes they can't be nested. Move the SingleProject out to its own route.

<Route path="/portfolio" element={<Portfolio />} />
<Route path="/portfolio/:id" element={<SingleProject />} />

If these components happen to share a layout or you do want to nest the routes then create a layout wrapper component that renders an Outlet for the nested routes.

import { Outlet } from 'react-router-dom';

const PortfolioLayout = () => {
  return <Outlet />;
};

...

<Route path="/portfolio" element={<PortfolioLayout />}>
  <Route index element={<Portfolio />} />
  <Route path=":id" element={<SingleProject />} />
</Route>

If you like, in RRDv6 you can also use relative links (i.e. links don't start with a "/" character) so if Portfolio is rendering the link it can relatively link to ":id".

<Link
  to={`${dt.id}`}
  className="...."
>
  <i class="fas fa-info-circle" title="Details" />
</Link>

Dynamic routing with react-roter-dom v6 problem

1 Answers1