JavaScript by Example

Implementing routing and navigation using React Router

React Router implements routing by displaying the components based on the URL the user visits in your web application. React Router can be used in both React.js and React Native. However, since we are only focusing on React.js, we should use the specific React Router library, react-router-dom, that handles routing and navigation on the browser.

The first step to implement React Router is to wrap the entire App component inside a <BrowserRouter> component from react-router-dom. To wrap the entire application, open the src/index.js file in your project directory in VSCode.

At the top of the index.js file, add the following import statement:

import {BrowserRouter as Router} from 'react-router-dom' ...