React Router ?

With React JS we can make Single page application. A single page application fetch only one index file from server but we have may have many pages in our app and we need to navigate among all without refreshing our app. In that case React Router comes

What is React Router ??

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application. It is process in which a user is directed to different pages based on their request.

So here i will tell you how to add Router in our project and how to use it!

Installing React Router

First we need to have create our react app

Than to add Router in our react app we have install in our app using npm install react-router-dom@6

Add Browser Router

To use router in our project we need import BrowserRouter and wrap our app within in BrowserRouter

import { BrowserRouter } from 'react-router-dom' and wrap our main <App /> component in <BrowserRouter></BrowserRouter>

//Index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from 'react-router-dom'

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

Adding Routes

So for the navigate among the all components we have to provide routes them.

For provide routes to the component first we have to import Routes from react-router package

import {Routes,Route} from "react-router-dom

here in App component we are wrapping all our Route into Routes and providing the path and element to each specific route

//App.js
import { Routes, Route } from "react-router-dom";
import {Home, Blog, About} from "./Components";

export default function App() {
  return (
    <div>
      <h1>React Router </h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/blog" element={<Blog />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

here path / refers to home page or main page of application

Adding Navigation to App

So in our project to navigate to specific route we use Link component to navigate because <a href="">Link</a> leads to refresh web page that's we don't want in our react project

To navigate through component we have made navbar using Link component provided by react-router-dom. That changes our App's path and we can see our desired component.

//App.js
import { Routes, Route, Link } from "react-router-dom";
import {Home, Blog, About} from "./Components";

export default function App() {
  return (
    <>
      <h1>React Router</h1>
      <nav>
        <Link to="/"> Home </Link>
        <Link to="/blog"> Blog </Link>
        <Link to="/about"> About </Link>
      </nav>

      <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/blog" element={<Blog />} />
         <Route path="/about" element={<About />} />
      </Routes>
    </>
  );
}

So this is all the basic things about React Router. There are other lot concept in react router as well. But for now that's it. Thanks for reading it to the end. Hope you like It.