What is React Router in React?

React Router is the standard routing library for React applications, enabling seamless navigation and dynamic page rendering without requiring full browser reloads. This article explains what React Router is, why it is essential for building Single Page Applications (SPAs), its core components, and how to implement it in your projects.

Understanding React Router

By default, React is designed for building Single Page Applications (SPAs). In a traditional multi-page website, clicking a link requests a new HTML document from the server, causing the browser to reload.

React Router solves this by intercepting browser navigation. Instead of fetching a new page from a server, React Router dynamically swaps components on the screen based on the current URL. This results in a faster, more fluid user experience that mimics a desktop application.

Key Features of React Router

• Declarative Routing: You can define your routes using JSX components directly inside your application code, making the routing logic easy to read and maintain.
• Dynamic Routing: Routes are resolved as the app renders, rather than in a configuration step before compilation.
• Nested Routing: You can render sub-views inside parent views, which is ideal for persistent layouts like dashboards with sidebars.
• State Preservation: Since the page does not reload, the application state is preserved during transitions.

Core Components of React Router

React Router (specifically react-router-dom for web applications) relies on a few essential components to manage navigation:

1. BrowserRouter

This is the parent wrapper component that must encompass your entire application. It uses the HTML5 History API to keep your UI in sync with the browser URL.

2. Routes

This component acts as a container for all the individual routes in your application. It looks through all its child routes to find a match for the current URL.

3. Route

The Route component maps a specific URL path to a React component. It requires two main props: * path: The URL path to match (e.g., /about). * element: The React component to render when the path matches (e.g., <About />).

4. Link

To navigate between pages, React Router uses the Link component instead of the standard HTML anchor (<a>) tag. The Link component prevents the browser from reloading the page and updates the URL internally.

Basic Implementation Example

Here is a simple example of how to set up React Router in a React application.

First, install the library:

npm install react-router-dom

Next, configure the router in your main application file:

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

// Simple page components
const Home = () => <h2>Home Page</h2>;
const About = () => <h2>About Page</h2>;
const Contact = () => <h2>Contact Page</h2>;

function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

In this setup, clicking any of the navigation links updates the URL in the browser address bar and immediately renders the corresponding component without refreshing the page.