BrowserRouter in React

#react #ai #javascript #programming

What is BrowserRouter?

BrowserRouter is a component from the library
React Router.

It helps us create navigation in a React application without refreshing the page.

It uses the browser’s history API to keep the UI in sync with the URL.

How to Use BrowserRouter (Step-by-Step)

Step 1: Install React Router

npm install react-router-dom

Step 2: Import BrowserRouter

import { BrowserRouter } from "react-router-dom";

Step 3 Wrap Your App

import { BrowserRouter } from "react-router-dom";
import App from "./App";

function Root() {
  return (
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
}

Now your entire app supports routing.

Creating Routes

We use Routes and Route.

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

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

Navigation Using Link

Instead of anchor tag, we use Link.

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

function Navbar() {
  return (
    <>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </>
  );
}