DEV Community

Madhan Raj
Madhan Raj

Posted on

BrowserRouter in React

#browserrouter #react #dev #beginners

BrowserRouter is a component provided by React Router to enable client-side routing using the HTML5 history API, allowing navigation without full page reloads. It also updates the browser URL dynamically while preserving the application state during view changes.

Client-side navigation: Handles routing in the browser using the HTML5 history API, avoiding full page reloads.
State-preserving URL updates: Changes the browser URL during navigation while keeping the app state intact.
Enter fullscreen mode Exit fullscreen mode

Syntax

<BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
</BrowserRouter>
Enter fullscreen mode Exit fullscreen mode 
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.
Enter fullscreen mode Exit fullscreen mode

Features of BrowserRouter

Real URL Updates: Reflects navigation in the browser's address bar using the HTML5 History API (pushState / replaceState).
Back & Forward Support: Native browser history buttons work out of the box for seamless navigation.
Deep Linking: Users can bookmark, share, or directly access any route via its URL.
SEO-Friendly: Clean, readable URLs (e.g., /products/123) are indexable by search engines.
Server-Side Rendering Ready: Pairs well with SSR frameworks like Next.js for full-stack React apps.
Enter fullscreen mode Exit fullscreen mode

Working

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>
Enter fullscreen mode Exit fullscreen mode

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 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 is matched.

<Route path="/about" component={About} />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Reference
https://www.geeksforgeeks.org/reactjs/browserrouter-in-react/

Top comments (0)