React Router

React Router is a popular library for handling client-side routing in React applications. It allows you to define routes for different parts of your application and map them to different components.

React Router allows developers to create different pages and routes in a single-page application and enables the application to display the appropriate content based on the URL.

React Router works by rendering the appropriate component based on the current URL. When a user navigates to a new page, the URL changes, and React Router matches the URL to the appropriate component to render on the screen.

Developers can define different routes using the Router component and specify which component to render for each route using the Route component. React Router also provides a set of navigation components, such as Link and NavLink, that can be used to create links between pages and highlight the active link based on the current URL.

React Router is a powerful tool for creating complex single-page applications with multiple pages and routes and improving the overall user experience of the application.

Here's an example:

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

function Home() {
  return <h1>Welcome Home</h1>;
}

function About() {
  return <h1>About Us</h1>;
}

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

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}