Beginner's Guide To React Router (v6)
Tags: react, webdev, tutorial, beginners
Published: 2022-11-28 22:00:09


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvbvcn9raxltgj2cemcu.png)
React router is a very useful tool for creating a React app. React Router is probably the most popular library developers use to do all of their **client-side routing**. The reason we use client-side routing is because Create React App is designed to create single-page applications. Meaning, the application only contains one HTML document and the server only has to load the original GET of this document, CSS, and JS files; rather than multiple pages. The big benefit and reason to this is for the **speed** of the application. What does React Router do? There are many things React Router can do, but the main two features to remember: 
**1. Rendering components based on on the URL.** Ex: When the url is /ShoppingList, your ShoppingList component will display.
 **2. Page navigation using JavaScript.** Ex: On a navigation bar, when you click the Shopping List tab, the page content updates to the ShoppingList component. 

## Installation
You can install React Router from the public NPM directory in two ways. In the terminal from the root directory of your application run either: 
**npm install react-router-dom**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nqf487v65x34ck82vxt.png)

or

**yarn add react-router-dom**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qmxnfrjapm5pyznods6.png)
If you are on Version 5 and need to upgrade to version 6, add the @latest tag to the end of either. Ex: npm install react-router-dom@latest.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3qhkowi90xvf6ehlpno.png)

## Basic Example


**In index.js:**
We must first import BrowserRouter from react-router-dom and wrap our entire application in the BrowserRouter component.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ls4p9zkldy996m5o3ji4.png)


**In App.js:**
Firstly, we must import { Routes, Route } from react-router-dom. Next, we want to import all the components we want to render. Lastly, we want to put the Routes component in the App function's return statement and nest all of our individual Route components in the Routes component.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hq5hmzpb6egu087faew.png)
Each Route takes two props. First is the path of the route. Ex: path="/contact" will route to yourWebsite.com/contact. Second is the element of the path, or what you want to display for that path. In this example it will be the Contact component. The reason we use the **exact** prop for the home route of "/" is that if we enter a value into the URL that doesn't exist like /something, it will still render our home component. This happens because "/" without **exact** would still be a partial match to /something. Also, we set a path to "*" is this acts as a _catch_ in case we get a URL that doesn't meet any of the criteria. This is good for any kind of error messages or 404 not found statements.

**In NavBar.js:**
Import either {NavLink} or {Link} from react-router-dom to start. Both Link and NavLink render as an `<a>` tag in the DOM and have the same base functionality. They are used to set URL's and keep track of the browsing history. They will both link to an internal path, EX: to="/projects". This **to** prop acts as the **href=** of an `<a>` tag. When these `<a>` tags are clicked, they change the URL to that path. In doing this it tells React Router to display the Route that matches the new URL. The difference between NavLink and Link is NavLink gets styled attributes when it matches the current URL. As in the name, NavLink is typically better for a navigation bar because of this styling.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojrp3n1bit77jb805286.png)
Side note: As discussed in the previous section with the **exact** prop you may have to use exact for a basic path like "/". This is  because the other paths that contain "/" would still be partial matches. 

## Conclusion
Client-side routing is a must for single-page applications and React Router is the best / most used tool to handle this. I hope you were able to learn something about the core functionality of React Router in order to do some client-side routing. If you made it this far, thanks for reading and happy coding :)!

**Additional Links:**
[https://www.w3schools.com/react/react_router.asp](https://www.w3schools.com/react/react_router.asp)
[https://reactrouter.com/en/main/start/overview](https://reactrouter.com/en/main/start/overview)
[https://www.npmjs.com/package/react-router](https://www.npmjs.com/package/react-router)