How to Use React Router Dom v6
Tags: react, reactrouterdom, mernstack, routing
Published: 2022-06-04 04:41:38

Official Documentation Link: https://reactrouter.com/docs/en/v6/getting-started/overview

Firstly, you have to install `react-router-dom` by using `npm i react-router-dom` or `yarn add react-router-dom` and the import the following.
```jsx
import {BrowserRouter, Routes, Route} from "react-router-dom".
```
All the **elements/components** are wrapped in **BrowserRouter** tag. All the pages (for e.g. **Home**, **About US**, **Contact Us**, etc.) are then wrapped in **Routes** tag. They are going to be the routes amongst which we can navigate. Then the layouts (for e.g. **Navbar**, **Footer**, etc.) are wrapped inside the **BrowserRouter** but outside the **Routes** tag because they are same for all pages or routes. Then all the **components/elements** inside the **Routes** tag are written as follows: 
```jsx
<Route element={Home} path="/" />
```
Unlike **react-router-dom v5**, there is no need to specify exact path for the element.

Example Code:
Suppose, there are 3 pages: Home, AboutUs, ContactUs
and 2 layouts: Navbar, Footer

## 1. Creating routes in App.js

```jsx
<BrowserRouter>
    <Navbar/>
    <Routes>
        <Route element={<Home/>} path="/" />
        <Route element={<AboutUs/>} path="/aboutUs" />
        <Route element={<ContactUs/>} path="/contactUs" />
    <Routes>
    <Footer />
<BrowserRouter/>
```

## 2. Links in React
The apps built without react, uses anchor tag to create hyperlinks as shown below.

```jsx
<a href="">Link text</a>
```
This method works in react but using anchor tags leads to whole page refresh, which is undesirable. Instead, only some part of the page which is needed to be updated should be changed. **react-router-dom** helps to achieve this type of routing. In react we use `<Link to=""> </Link>` instead of `<a href=""> </a>`. Note that **href** is replaced by **to**. In short, if the website uses same layouts such as navbar or footer, then only the body of the pages are re-rendered.

## 3. Redirecting in react-router-dom v6
There are two ways to redirect in **react-router-dom v6**. First you can redirect to any path from the routes page where all the routes are written and second one is you can redirect from any component/element.

1. Redirecting from a path:
First:

```jsx
import {Navigate} from "react-router-dom"
```
You just have to add following code to the <Route />
```jsx
<Router path="/redirect" element={<Navigate to="/" replace } />
```
In this case, when you'll hit the path `"/redirect"` it will automatically redirect to path `"/"`. If you replace path (i.e. `"/redirect"`) by `"*"`, then any it will redirect to `"/"` on any path excluding the `<Routes />` (i.e. "/home", "/aboutUs", "contactUs") we made.

2. Redirecting from a component/element:
This can be achieved by using `useNavigation` hook.
First:
```jsx
import {useNavigate} from "react-router-dom";
```
Then initialize the function by:
```jsx
const navigate = useNavigate();
```
Then we can use this variable **navigate** to **navigate** or **redirect** to any path.
Now simply just write
```jsx
navigate("/path")
```
This will navigate to "/path"