Skip to main content

Setting up React Router (Part 2): A Deep Dive into the `BrowserRouter` Component #90

📖 Introduction​

Following our initial setup of React Router, this article takes a deeper dive into the foundational component that makes it all possible: <BrowserRouter>. We will explore how it works under the hood and discuss some of its configuration options.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • All concepts from Part 1 of this series.
  • A basic understanding of the HTML5 History API.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ How BrowserRouter Works: A look at the HTML5 History API and how BrowserRouter uses it to keep your UI in sync with the URL.
  • ✅ Configuration Options: An overview of the props you can pass to BrowserRouter to customize its behavior.
  • ✅ Server-Side Configuration: Why you need to configure your server when using BrowserRouter and how to do it.

🧠 Section 1: The Core Concepts of BrowserRouter​

The <BrowserRouter> component is the heart of React Router. It uses the HTML5 History API (specifically the pushState, replaceState, and popstate events) to manage the browser's history and keep the URL in the address bar up to date with the state of your application.

When you navigate to a new route, <BrowserRouter> updates the URL and adds a new entry to the browser's history stack without making a request to the server. This is what allows for the seamless, single-page application experience.

💻 Section 2: Deep Dive - Configuration Options​

While you'll often use <BrowserRouter> without any props, there are a few you can use to customize its behavior.

2.1 - basename​

The basename prop is useful when your application is not served from the root of your domain. For example, if your application is served from /my-app, you would set the basename like this:

<BrowserRouter basename="/my-app">
  <App />
</BrowserRouter>

Now, all of your routes will be relative to /my-app.

2.2 - children​

The children prop is simply the rest of your application. You'll typically pass your main <App /> component as the child of <BrowserRouter>.

2.3 - window​

The window prop is for advanced use cases where you need to provide a different window object to the router. You will most likely never need to use this.

🛠️ Section 3: Server-Side Configuration​

Because <BrowserRouter> uses the HTML5 History API to create "clean" URLs (e.g., /about, /contact), you need to configure your server to handle these URLs correctly.

When a user navigates directly to a URL like /about in their browser, the browser will make a request to your server for that URL. If your server is not configured to handle this, it will likely return a 404 Not Found error.

To fix this, you need to configure your server to send your main index.html file for any request that is not for a static asset (like a CSS or JavaScript file). This will allow your React application to load and React Router to take over and render the correct component for the given URL.

How you do this depends on your server. Here are a few examples:

  • Create React App's Development Server: This is already configured for you.
  • Express: You can use the connect-history-api-fallback middleware or a catch-all route.
  • Netlify/Vercel: These platforms typically have a simple way to configure this in a configuration file.

💡 Conclusion & Key Takeaways​

In this article, we've taken a deeper dive into the <BrowserRouter> component. We've learned how it works, what its configuration options are, and why server-side configuration is necessary.

Let's summarize the key takeaways:

  • <BrowserRouter> uses the HTML5 History API to manage routing.
  • The basename prop is useful for applications that are not served from the root of a domain.
  • Server-side configuration is required to handle direct navigation to routes.

Challenge Yourself: To solidify your understanding, try to deploy a simple React Router application to a platform like Netlify or Vercel and configure the server to handle routing correctly.

➡️ Next Steps​

You now have a solid understanding of the <BrowserRouter> component. In the next article, "Basic Routing: Routes, Route, and Link (Part 1)", we will explore the core components for defining and navigating between routes.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • HTML5 History API: A set of APIs that allow you to manipulate the browser's history.
  • Basename: The base URL for all locations.
  • Catch-all Route: A route that matches any URL that has not been matched by a more specific route.

Further Reading​