Managing routing with React Router

There are a few good libraries available for routing in React. React frameworks such as Next.js and Remix provide built-in routing solutions. The most popular library, 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. React Router uses URL-based routing, which means that we can define which component is rendered based on the URL.

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

npm install react-router-dom@6

The react-router-dom library provides components that are used 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...