Dynamic url-route generation for React web app with React-router-dom

Recently on a project I wanted to generate dynamic url routes, as you can see here, each fish has it's own page and each page has it's own dynamic url based on the fish's name. I set out to find out how to do it but surprisingly there wasn't much documentation on it and tutorials that did show how to do it were quite vague about it.

So how did I do it in my app? I used react-router-dom v6 in my app to help achieve this. Therefore, this tutorial assumes that you're familiar with react-router-dom to some degree, that being said this is a fairly simple tutorial as react-router-dom does most of the heavy lifting for you.

Let's see how it works:

Here while mapping over the fishStore array I am wrapping every
individual card component with a Link which will lead to every
fish's individual info page.

{
  fishStore.map((fishInfo, index) => {
    return (

      <Link

/* Below is the page path with an interpolated string where 
fishInfo.fishPath is the dynamic bit which is being used to 
generated each page's unqiue url from the array the pre-fixed main 
path stays the same */

        to={`/fish-info/${fishInfo.fishPath}`}
        state={{ fishInfo }}
        key={index}
      >
        <Card
          source={fishInfo.fishImageSrc}
          altText={fishInfo.fishImageAlt}
          fishName={fishInfo.fishName}
          fishScientificName={fishInfo.fishScientificName}
          key={index}
        />
      </Link>
    );
  });
}

Allocating the dynamic route variable in the Router:

In the Router we need to add the dynamic route

<Router>
  <StyledOuterContainer>
    <Routes>
      <Route path="/" element={<Home />} />

/* Below we are adding the Route path which goes to the 
<FishInfo/> component for rendering each fish's individual page */

      <Route path="/fish-info/:fish" element={<FishInfo />} />
      <Route path="*" element={<Exist />} />
    </Routes>
  </StyledOuterContainer>
</Router>;

Dynamic variable in the Route path string:

Here pay attention to the :fish in the Route path, which is pre-fixed by a colon : symbol. This is important as it tells react-router-dom that this part is subject to being dynamically changed and "/fish-info/" is the base string for every page that stays the same. This colon pre-fixed string can be any name you desire.

 <Route path="/fish-info/:fish" element={<FishInfo />} />

Now in order to access data in the fishInfo component you can do the following:

const location = useLocation()
const {fishInfo}: any = location.state

That's all you need to do, you have now completed generating dynamic urls for individual pages using react-router-dom.

Comments

[Divyarani R]

great! but how to access this variable inside that fishinfo component ?

[Adi]

you can do the following in that component to gain access to the state passed via the props
const location = useLocation()
const {fishInfo}: any = location.state


[MD ARIF KHAN]

I think we can pass it ass a prop where we write the element