BrowserRouter in React

React Router is the default router for React. It allows the switching from one view from one component to the next from multiple components in the React app, changes the browser address, and syncs the UI and the address.

What is BrowserRouter in React Router?

BrowserRouter is a component provided by the React Router to provide the client-side routing with the support of the HTML5 history API. It facilitates you to navigate the process without page reload. If you want to change between the next page while navigation then BrowserRouter modifies the web browser address accordingly to provide the functionality of preserving the state of the application while changing the views.

Syntax

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

• Enables Routing: BrowserRouter wraps the application, allowing URL-based navigation without page reloads.
• Defines Routes: Routes contain Route components, mapping paths (/, /about) to specific React components.

Why Use BrowserRouter?

BrowserRouter plays a crucial role in building modern React applications by providing efficient client-side routing.

• Seamless Navigation: Ensures smooth transitions without full-page reloads.
• Seamless Navigation: Ensures smooth transitions without full-page reloads.
• Improves Performance: Reduces unnecessary HTTP requests for navigation.
• Deep Linking Support: Enables bookmarking and direct linking.
• Works Well with State Management: Easily integrates with Redux, Context API, etc.

How Does BrowserRouter Work?

BrowserRouter uses the HTML5 history API, which consists of pushState, replaceState, and popstate events, to update the browser’s history and allow for dynamic routing.

Initialization of Browser Router

When the application is loaded, the BrowserRouter component is wrapped around the entire app (typically at the top level).

<BrowserRouter>
  <App />
</BrowserRouter>

URL Detection

BrowserRouter uses the HTML5 History API to detect changes in the URL. This allows React Router to manipulate the URL while keeping the page from reloading. When a user navigates to a different route (e.g., clicking a <Link> or typing a URL), BrowserRouter listens for this URL change.

Matching the URL

Inside BrowserRouter the Route components define which URL path corresponds to which component. For instance, when the URL is /about, a <Route path="/about" component={About} /> is matched.

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

Rendering Components

After matching the URL to the corresponding Route, the associated component is rendered. If the URL matches /about, the About component will be displayed.

Navigating Between Views

When a user clicks a link, such as:

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

Maintaining Application State

Since the page doesn't reload, the application's state (like form data or user input) remains intact. React will only re-render the relevant components, ensuring a seamless user experience.

History Management

The BrowserRouter uses the browser's built-in history stack, so users can navigate backward and forward between different routes using the browser's back and forward buttons.

Dynamic Updates

As the URL changes (either by user interaction or programmatically using the history object), BrowserRouter continues to handle the URL and re-render the app's UI accordingly, providing smooth transitions between views.

React application using BrowserRouter

import React from "react";
import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();

  const goabout = () => {
    navigate("/about");
  };
  return (
    <div>
      <h3>Welcome to home page</h3>
      <button onClick={goabout}>Go to About page</button>
    </div>
  );
};

export default Home;

import React from "react";
import { useNavigate } from "react-router-dom";

const About = () => {
  const navigate = useNavigate();

  const gohome = () => {
    navigate(-1);
  };
  return (
    <div>
      <h3>Welcome to about us page</h3>
      <button onClick={gohome}>Go to Home Page</button>
    </div>
  );
};

export default About;

import React from "react";
import { useParams } from "react-router-dom";

const UserDetail = () => {
  const { userId } = useParams();
  return (
    <div>
      <h1>User Details:</h1>
      <p>User information is:{userId}</p>
    </div>
  );
};

export default UserDetail;

import React from "react";
import { useNavigate } from "react-router-dom";

const UserProfile = () => {
  const navigate = useNavigate();

  const logout = () => {
    navigate("/login");
  };
  return (
    <div>
      <h1>User Profile</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
};

export default UserProfile;

//useNavigation with useParams...
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./components/useNavigate/Home";
import About from "./components/useNavigate/About";
import UserDetail from "./components/useNavigate/UserDetail";
import UserProfile from "./components/useNavigate/UserProfile";

const App = () => {
  return (
    <div>
      <Router>
        <nav>
          <ul style={{ display: "flex", gap: "20px" }}>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/user/123">User Details</Link>
            </li>
            <li>
              <Link to="/profile">User Profile</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/user/:userId" element={<UserDetail />} />
          <Route path="/profile" element={<UserProfile />} />
        </Routes>
      </Router>
    </div>
  );
};

export default App;

Output:

In this code

• Implements Navigation: The code uses BrowserRouter and Routes to enable navigation between pages (Home, About, UserDetail, and UserProfile) without reloading.
• Handles Dynamic Routing : useParams retrieves route parameters (e.g., userId), and useNavigate enables programmatic navigation (go to about, logout).

Conclusion

BrowserRouter is an essential tool for enabling client-side routing in React applications. It ensures smooth navigation, improves performance, and supports dynamic and nested routes. By integrating BrowserRouter, developers can build efficient and user-friendly SPAs with structured navigation.