This is a simple example and How to Implement Routing in React, you can extend it based on your application’s requirements. React Router provides more advanced features like nested routes, route parameters, and route guarding, which you can explore in the official documentation. Routing is a necessity when it comes to JavaScript-based single-page applications (SPAs). At some point, your app is going to need navigation. The way SPAs work is by sending the compiled and minified JavaScript file over with the HTML and CSS, then proceeds to render the site with lazy loading techniques to provide the user with a just-in-time browsing experience.
Routing is the technique that gives the impression of the app or website multiple pages or views. However, in reality, it’s all still just the same original page sent from the server-side. All the processing is completed on the client-side in a seamless manner.
So how does routing and redirecting work in React?
Unlike Angular and other JavaScript-based SPA frameworks, React doesn’t come with a pre-built routing system. React, after all, just a UI library. This means that its sole purpose is to help developers organize and render UI in the most effective and efficient manner. Routing is considered an extra feature.
However, the perks of React is that it has a strong developer community, meaning that common development needs — such as routing — have already been addressed via an add-on library to React. In our case, it’s called React Router.
Routing in React: Installation
There are two ways you can install React Router into your React project. The first method is to add it to your project repository via yarn.
yarn add react-router-dom
Alternatively, you can do so using npm install
npm install react-router-dom
Debugging notes:
You might run into a potential conflict with babel jest when you try to use React Router. It’s similar to the issue that occurs when you install node-sass. You’ll see the conflict pop up in your console when you try to start your React application.
When this happens, it’s because the dependencies of babel jest are different from the react-router library we’ve just installed. If you look at the actual error, most of the time, it’s not the major versions that are in conflict with one another — rather, it’s the minor trailing updated versions.
To fix this, go inside your packages.json and add a resolutions property and tell it that we always want babel jest to be a specific version no matter what.
Here is an example of what this might look like:
…
“devDependencies”:{
“react-scripts”: “3.0.0”
},
“resolutions”:{
“babel-jest”:”24.7.1″
}
…
After you’ve done this, save your file and reinstall your React Router library. Once this is completed, you should have no problem starting your application.
Using React Router:
Before you can begin to use routing in your React app, you need to go to your index.js and import in BrowserRouter.
It looks something like this:
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import { BrowserRouter } from ‘react-router-dom’;
BrowserRouter is actually a component that you can use to wrap around your application to make routing possible. What this does is give your component all the functionality available within BrowserRouter.
