How to Validate Dynamic Routes in React Router

Fetch and validate the data before rendering the component

Photo by Ferenc Almasi on Unsplash

Source code: https://github.com/AbdelrhmanAmin/React-Dynamic-Routes-Manager

The problem:

To illustrate the problem let’s take for example users’ profiles.

I would define dynamic routes with a param users/:userId and would render the profile component and inside of the component I would get the userId from useParams and inside of useEffect I would make a fetch request to get the user info.

The problem is, userId can really be anything. It could be 12 or hellomom …Since React does everything on the client side, the page component would render even if someone changed the URL to be something invalid e.g users/hilol or if someone is trying to visit a URL to a user profile that has been deleted.

Of course, having good structure is important, showing a loading indicator in the page component while fetching the data and an error message if the fetch fails are vitally essential. But, what if we can fetch and validate the data before rendering the component?

My solution

I built a manager component that is responsible for validating that the fetch response is okay, if so, then render the page component or else show a 404 page.

Let me walk you through the code.

First I would wrap the page component inside of the manager component like so:

Then, I would pass to the manager a prop called fetcher which is a function that receives the route params and returns a fetch request.

The first thing that will happen when the user enters the page is that the manager will execute the first useEffect, the one that is doing the validation. ONLY if the pathname is not inside invalidRoutesRef .

Note: this will be empty every mount, I recommend you to use Redux or React context to store invalidRoutes to avoid validating routes in vain.

The reason I used *invalidRoutesRef instead of simply using a flag like `isValid* , is that I noticed after navigating to a different profile that the value ofisValid` would persist as “false”, thus the page would show 404 even if the *userId* is valid.

The function starts by setting the isLoading to true (Hint: make it true by default to show the loading indicator on the first render😄) and passes the fetcher function the paramsof the route and wait till the fetch resolves.

The isLoading will render a loading screen while the data is being fetched.

If the request fails, then push the pathname to invalidRoutesRef. Then, set isLoading to false.

Finally.

I hope this may benefit you.

More content at **PlainEnglish.io. Sign up for our [free weekly newsletter](http://newsletter.plainenglish.io/). Follow us on [Twitter](https://twitter.com/inPlainEngHQ)**, ***LinkedIn, [YouTube](https://www.youtube.com/channel/UCtipWUghju290NWcn8jhyAw), and [Discord](https://discord.gg/GtDtUAvyhW)*.