Basic Guide to use React Router v6
Tags: react, javascript, webdev, reactrouter
Published: 2021-07-07 05:53:40

Single Page Applications in React require a means of routing to navigate on to different views without refreshing the webpage. This can be done using `React Router`. 
If you don't know how router works in React, I suggest you read about it and then follow this guide to get updated with the latest version of it.
The v6 of React Router is still in `beta` mode. This Blog is going to give you a peek into some of the new features that the library is coming out with.

##1. `<BrowserRouter>`

We first need to import `<BrowserRouter>`. It is an interface which is required to use React Router. Here we have used an alias Router which makes it easier to write. We import it in our index.js file and wrap it around our `<App/>` 

``` javascript
import React from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
    <Router>
      <App />
    </Router>,
  rootElement
);
```
Its syntax is much similar to that of `context` APIs. It means that the App Component and its children will now have access to the Router APIs.

##2. `<Routes>` and `<Route>`

`Routes` is a new element and an upgrade from previous `Switch` Component. It includes features like relative routing and linking, automatic route ranking and so on.
A Route has two main props, `path` which is nothing but the URL path and `element` which is the component to be rendered when the current URL matches the path. 
Below is an example where we have three `Route`

``` javascript 
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/menu" element={<Menu />} />
  <Route path="/about" element={<About />} 
</Routes>
```
##3. `<Link>` and `<NavLink>`
When we use a simple `<a href="abc.com">Some Link</a>` for navigating it leads to refreshing of the webpage. To avoid this React Router provides a `Link` element.
A `Link` is an element that lets the user navigate to another page by clicking or tapping on it.
It has a prop `to` where we provide the path to which it should navigate.

```javascript
import React from 'react';
import { Link } from 'react-router-dom';

export function Navbar() {
  return (
    <nav>
      <Link to="/home"> Home </Link>
      <Link to="/about"> About </Link>
    </nav>
  )
}
```
`Link` and `NavLink` are very similar and the only difference is that `Navlink` knows whether or not it is `active`. This is useful when you want to apply a style to the link which is active.

```javascript
import React from 'react';
import { NavLink } from 'react-router-dom';

export function Navbar() {
  return (
    <nav>
      <NavLink to="/home" activeStyle={{textDecoration:"underline" , color:"red"}}> Home </Link>
      <NavLink to="/about" activeStyle={{textDecoration:"underline" , color:"red"}}> About </Link>
    </nav>
  )
}
```
##4. `useNavigate hook` 
The `useNavigate` hook lets you navigate programmatically . This is useful any time you need to navigate imperatively, e.g. after the user submits a form or clicks on a button.
``` javascript
import React from 'react';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

function App() {
  let navigate = useNavigate();
  let [error, setError] = React.useState(null);

  async function handleSubmit(event) {
    event.preventDefault();
    let result = await submitForm(event.target);
    if (result.error) {
      setError(result.error);
    } else {
      navigate('success');
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      // ...
    </form>
  );
}
```
##5. `useParams hook` 
The `useParams` hook is used to access the URL params. It is very useful in case you want to make an Individual ProductPage for products in an Ecommerce App.

```javascript
<Route path="/products/:id" element={<ProductPage />} />
```
When used in a nested route it returns an object of all the params in the URL. Below is a simple implementation on how to use `useParams` to access the URL params.

```javascript
import React from 'react';
import { useParams } from 'react-router-dom';
import { products } from './data/products';

export function ProductPage() {
  const { id } = useParams()
  const product = products.find(el => el.id === id)
  return (
     <li key={product.id}>
        <h3>{product.name}</h3>
        <p>{product.description}</p>
        <p>{product.price}</p>
     </li>
  );
}

```
- - -

I hope you learnt a lot from this blog. Now, you can try implementing the latest version of React Router in your projects. You can also check the [docs](https://github.com/ReactTraining/react-router/blob/dev/docs/installation/getting-started.md) for more information.
 
If you enjoyed this post, I’d be very grateful if you’d share it. Also, This is my first blog. I am open to any suggestions. Comment below if you have any doubts or questions.

Thank you for reading!