Route Management Using React Router DOM

On the Web Development it's common the page routing.

It works with the application managing what will be rendered according the page (also called path) accessed by the user.

There are several ways to control page routes, but now let's talk about this process using the React Router DOM lib.

Installing de lib:

npm i react-router-dom

Creating a functional Router component contained our routes. It's necessary importing from 'react-router-dom' the components Route and Routes.

To the component Route is necessary add some props like: path and the element which will be render.

At the route /home will render de component Home and the route /history will render de component History.

Lets to complicate more? If I want to use the same path to more than one route? It's easy!

You can use the functional component Route as a container, and add path which will be shared to their children.

Now to visualize the component Home it's necessary access the route /page/home, the same way to History which will be render if accessed by /page/history.

To Finish it's necessary add the Provider Browser Router around to our Router component into of React App.