React router. Route configuration

Simplify route creation and configuration when working with React Router

Today I want to tell you about a very interesting way of organizing the React Router routes so that we do not have to resort to writing the routes of our application one by one using <Route> components, which ends in gigantic structures of the type:

<Switch>
  <Route ...>
  <Route ...>
  <Route ...> 
  ...
  🤯🤯🤯
</Switch>

In addition, this will serve as a starting point to add new logic to them as a role check or separate their layouts based on a parameter that we determine.

This article is based on the idea proposed in the documentation of the React Router library whose example you can consult at this link.

To complete the article at the end of it you have a link to the CodeSandbox that I have created so that you can play with it.

So, without further ado, let’s see it!

Let’s start

The first thing we will do is start from an application that has the typical route structure that I mentioned before: