Managing routing in React

There are multiple solutions available for routing in React. The most popular one, which we are using, is React Router (https://github.com/ReactTraining/react-router). For web applications, React Router provides a package called react-router-dom.

To start using React Router, we have to install dependencies using the following command. In this book, we are using version React Router version 6:

npm install react-router-dom@6 history@5

Four different components in the react-router-dom library are required to implement routing. BrowserRouter is the router for web-based applications. The Route component renders the defined component if the given locations match.

The following code snippet provides an example of the Route component. The element prop defines a rendered component when the user navigates to the contact endpoint that is defined in the path prop. The path is relative to the parent route that renders them:

<Route path="contact"...