React Router Version 6 Tutorial How to Set up React Router@6
Tags: react, javascript, devops, beginners
Published: 2022-11-02 03:15:43

In this tutorial we are going to discuss how to get started with react router version 6 to navigate and render multiple componets in your single page application(spa)

**Prerequisites**
1. A Basic React application
2. Basic knowledge of react


**Install React Router**
The first step after creating a react app is to install react router 
To install the react router open your command line and type below code and hit enter to install react router@6

```
npm install react-router-dom@6
```
if you are using yarn then

```
yarn add react-router-dom@6
```
**Setup React Router**
The setup of react router is very simple. Navigate to your src folder and open index.js file after then import BrowserRouter from 'react-router-dom' and wrap the root component with this.

After doing so your index.js file may look like this

```
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";

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

```
**How To Route the other Componets**
We are done with the inital setup and now we can create routes for other componets to render follow me

**Create Mutiple components to Route**
Now we are creating multiple components like home.js signup.js and about.js etc.

```
import React from 'react'

function Contacting() {
    return (
        <div className="bg-danger">
            <p>This is the contact page</p>
        </div>
    )
}

export default Contacting
```
                    Contact.js

```
import React from 'react'

function AboutUs() {
    return (
        <div className="bg-primary">
            <p>This is the about page</p>
        </div>
    )
}

export default AboutUs
```
                            About.js

```
function HomePage() {
  return (
    <div className="bg-success">
      <p>This is the home page</p>
    </div>
  );
}

export default HomePage
```
                             Home.js

## Defining Routes 
Now open app.js file and define the routes and path for specific component to render

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

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={ <HomePage/> } />
        <Route path="aboutus" element={ <AboutUs/> } />
        <Route path="contacting" element={ <Contacting/> } />
      </Routes>
    </div>
  )
}

export default App
```

## use Link tag provided by react-router-dom to navigate around

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

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

export default Home;

```
That's all for this tutorial now we can play around with react router in your react app.

Note:-This will work only for react router version 6 

follow me on github to get more tutorial like this
{% embed https://github.com/Sachinsingh101 %}