BrowserRouter

If you are using the react-router library for building any routing or navigation in a React app, you would have surely encountered BrowserRouter. So what exactly is a BrowserRouter. Here in this article we will try to get an answer to this question?

BrowserRouter is a component (type of Router) provided by react-router library which uses the HTML5 history API. A breif glimpse of HTML5 history API is below.

//GO BACK
window.history.back();

//GO FORWARD
window.history.forward();

A more detailed explanation can be read here at HTML5 History API.

The BrowserRouter specifically uses pushState, replaceState and popState events to keep your UI in sync with your browser URL Below is an example of these events used in HTML5.

history.pushState({page: 1}, "Home Page", "?page=1")
history.pushState({page: 2}, "About Page", "?page=2")
history.replaceState({page: 3}, "Services Page", "?page=3")

Below is an example of various BrowserRouter attributes. Please note that all these attributes are optional and you can use BrowserRouter without using any of these attributes.

<BrowserRouter
  basename="ABC"
  forceRefresh=false
  getUserConfirmation={callback}
  keyLength=6>
  <App />
</BrowserRouter>

Let’s go through each of the attributes as one by one.

basename

This will be base url for all the locations. Think of this as sub-folder or sub-directory in your application. A basename should ideally have a leading slash (/), not a trailing slash (/).

Good basename – /services

Bad basename – products/

Below is an example of basename.

<BrowserRouter basename="/tvchannels">
    <Link to="/discoverykid"/> // renders <a href="/tvchannels/discoverykid">
    <Link to="/nick"/> // renders <a href="/tvchannels/nick">   
</BrowserRouter>

getUserConfirmation

getUserConfirmation can point to a javascript callback function which will be called to use to confirm user navigation. It’s default behavior is window.confirm. The Window.confirm() method displays a modal dialog with an optional message and two buttons: OK and Cancel.

<BrowserRouter
  getUserConfirmation={(message, callback) => {
    // below is default behavior
    const allowTransition = window.confirm(message);
    callback(allowTransition);
  }}
/>

forceRefresh

We need to supply a boolean value to forceRefresh. If the value is true, a complete page refresh will occur on user navigation. To people coming from JSP or PHP or Python background, this would be relatable as these are server side rendered apps.

Below is the example of how to use this property.

<BrowserRouter forceRefresh={true} />

Hopefully this was a good introduction on BrowserRouter capabilities and configuration. As a conclusion let me post a complete working BrowserRouter implementation example.

import React from 'react';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  NoMatch
} from "react-router-dom";


export default function App() {
  return (
    
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About Me</Link>
            </li>
            <li>
              <Link to="/service" >Services</Link>
            </li>
          </ul>
        </nav>

       
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/service">
            <Services/>
          </Route>
          <Route path="/">
            <Home />
          </Route>
		  
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Holy Cow Home Page</h2>;
}

function About() {
  return <h2>I am Anil. An awesome react developer. :) </h2>;
}

function Services() {
  return <h2>I provide amazing services at a very high cost. </h2>;
}