React Router Version 6 Tutorial How to Set up React Router@6

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

Sachinsingh101 (Sachin Kumar Singh) · GitHub

Programmer | Developer | Learner | Typist | Editor - Sachinsingh101

github.com