React Router v-6
Published: 2023-02-08 19:59:54

## **How to Install React Router**
To install React Router run `npm install react-router-dom@6` in your react project terminal
If you are using yarn then use this command: `yarn add react-router-dom@6`.

## **Set Up**
To do this, open the   `index.js`  file in the  `src`  folder and import   `BrowserRouter`  from    `react-router-dom`  and then wrap the root component

```
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);
```

## **How to Route to Other Components**

**Step 1 : Create multiple components**

We'll create the following  `Home` , `About` ,and  `Contact` components like this:
                                   

Home component
```
const Home=()=> {
  return (
    <div>
      <h1>This is the home page</h1>
    </div>
  );
}

export default Home;
```
About component


```
const About=()=> {
  return (
    <div>
      <h1>This is the About page</h1>
    </div>
  );
}

export default About;
```

Contact  component


```
const Contact=()=> {
  return (
    <div>
      <h1>This is the Contact page</h1>
    </div>
  );
}

export default Contact;
```

**Step 2 : Define routes**

The `App `component acts as the root component that our React code initially renders, so we will create all our routes there.

```
import { Routes, Route } from "react-router-dom"
import Home from "./Home"
import About from "./About"
import Contact from "./Contact"

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={ <Home/> } />
        <Route path="/about" element={ <About/> } />
        <Route path="/contact" element={ <Contact/> } />
      </Routes>
    </div>
  )
}

export default App
```
`Routes `acts as a container for all the individual routes that  created in the app.

`Route `is used to create a single route, It takes in two attributes:

1. `path ` which specifies the URL path of the desired component.   you'll notice that the first pathname is a backslash (/)which will get rendered first whenever the app loads for the first time. This implies that the Home component will be the first component to get rendered.

2. `element` which specifies the component the route should render.

**Step 3 : navigate to routes**

We will use `Link `to navigate between pages/components
The `Link ` component is like element `<a>` in HTML. Its to attribute specifies which path the link takes you to.

we will create a new component called `Navbar.js` like this and navigate between components

```
import { Link } from "react-router-dom";

const Navbar=()=> {
  return (
    <div>
      <h1>This is the home page</h1>
      <Link to="/about">Click to view our about page</Link>
      <Link to="/contact">Click to view our contact page</Link>
    </div>
  );
}

export default Navbar;
```

So the `App `component will be like this

```
import { Routes, Route } from "react-router-dom"
import Home from "./Home"
import About from "./About"
import Contact from "./Contact"
import Navbar from "./Navbar"
function App() {
  return (
    <div>
      <Navbar/>
      <Routes>
        <Route path="/" element={ <Home/> } />
        <Route path="/about" element={ <About/> } />
        <Route path="/contact" element={ <Contact/> } />
      </Routes>
    </div>
  )
}

export default App
```