BrowserRouter in React

1. What is React Router?

React Router is a library that helps us navigate between different pages or views in a React application.

For example:

• / displays the Home page.
• /products displays the Products page.
• /about displays the About page.
• /cart displays the Cart page.

We can move between these pages without reloading the entire website.

2. What is BrowserRouter?

BrowserRouter is a component provided by React Router.

It uses the browser's URL to manage navigation in our React application.

In simple words, BrowserRouter helps React understand which page should be displayed based on the URL.

3. Installing React Router

Before using React Router, we need to install it.

Open your terminal inside your React project and run:

npm install react-router-dom

Now we can use React Router in our application.

4. Creating Different Pages

First, let's create three simple components.

Home.jsx

function Home() {
  return <h1>Welcome to Home Page</h1>;
}

export default Home;

About.jsx

function About() {
  return <h1>This is About Page</h1>;
}

export default About;

Contact.jsx

function Contact() {
  return <h1>This is Contact Page</h1>;
}

export default Contact;

Each component represents a different page in our application.

5. Setting Up BrowserRouter

Now let's connect these pages using React Router.

In main.jsx, write:

import React from "react";
import ReactDOM from "react-dom/client";

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

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

Here, we wrap our App component inside BrowserRouter.

This allows the components inside App to use React Router features.

6. Using Routes and Route

Now open App.jsx.

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

import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

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

      <Route path="/about" element={<About />} />

      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

export default App;

Let's understand the important parts.

• Routes: Holds all the route definitions.
• Route: Connects a URL path to a component.
• path: Defines the URL.
• element: Defines which component should be displayed.

For example:

<Route path="/about" element={<About />} />

This means whenever the user visits /about, React displays the About component.

7. Navigating Between Pages Using Link

We have created different pages, but how can users move between them?

We can use the Link component provided by React Router.

Let's update our App.jsx:

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

import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

function App() {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link>

        <Link to="/about">About</Link>

        <Link to="/contact">Contact</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
}

export default App;

Now we can click the links to move between pages.

Important: Link is similar to an HTML anchor tag, but it handles navigation through React Router without a full page reload.

8. Where Do We Use React Router?

React Router is useful when building applications with multiple pages or views.

For example, in an e-commerce application:

URL	Page
/	Home
/products	Products
/cart	Shopping Cart
/login	Login
/profile	User Profile

When a user clicks the Cart link, React Router displays the Cart component.

We don't need to create a separate HTML file for every page.

9. Important Things to Remember

• React Router helps us navigate between pages in React.
• BrowserRouter manages navigation using the browser URL.
• Routes contains our route definitions.
• Route connects a URL path to a component.
• Link allows users to navigate between pages without a full page reload.