ReactJs BrowserRouter

The BrowserRouter is a component provided by the react-router-dom library in React that enables dynamic client-side routing. It allows you to easily navigate between different views of your web application without causing the entire page to reload.

Syntax

import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Route exact path="/" component={HomePage} />
      <Route path="/about" component={AboutPage} />
      <Route path="/contact" component={ContactPage} />
    </BrowserRouter>
  );
}

Example

Here is an example of how to use the BrowserRouter in a React application:

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';

const HomePage = () => <h1>Welcome to the home page!</h1>;
const AboutPage = () => <h1>Learn about us here.</h1>;
const ContactPage = () => <h1>Contact us for more information.</h1>;

const Navigation = () => (
  <nav>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/contact">Contact</Link>
      </li>
    </ul>
  </nav>
);

function App() {
  return (
    <div>
      <BrowserRouter>
        <Navigation />
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/contact" component={ContactPage} />
      </BrowserRouter>
    </div>
  );
}

export default App;

Output

The output of the example code above will render a navigation menu and display the appropriate component based on the URL path:

• When the URL path is /, the HomePage component will be rendered with the navigation menu highlighting the "Home" link.
• When the URL path is /about, the AboutPage component will be rendered with the navigation menu highlighting the "About" link.
• When the URL path is /contact, the ContactPage component will be rendered with the navigation menu highlighting the "Contact" link.

Explanation

The BrowserRouter component is the top-level component that wraps our routes. It uses the HTML5 history API to keep the URL in sync with the state of the application. Within the BrowserRouter, we define our routes using Route components.

In the example code above, we have defined three routes using Route: one for the home page, one for the about page, and one for the contact page. We've also defined a Navigation component that provides links to navigate between these pages.

Note that we've set the exact prop on the Route component for the home page so that it only matches the root URL path, and not any sub-paths.

Use

Use the BrowserRouter component when you need to dynamically navigate between different views of your React application without causing the entire page to reload.

Important Points

• The BrowserRouter component is part of the react-router-dom library in React.
• Routes are defined using the Route component.
• The BrowserRouter component is the top-level component that wraps our routes.
• Use the exact prop on a Route component to match the root path only.
• The Link component is used for navigation within your application.

Summary

The BrowserRouter component provided by the react-router-dom library in React enables dynamic client-side routing. It allows you to easily navigate between different views of your web application without causing the entire page to reload. Use Route components to define your routes, and the exact prop to match the root URL path only. The Link component is used for navigation within your application.