Introduction to React Router

React Router is a powerful library used for handling navigation and routing in React applications. It allows you to manage different views or pages within a single-page application (SPA) without requiring full page reloads. With React Router, you can map URLs to different components, enabling dynamic navigation in your app.

1. What is React Router?

React Router is a collection of navigational components that enables navigation between views or components in a React application. It helps you to:

• Define routes to render specific components based on the URL.
• Create nested routes for complex layouts.
• Handle URL parameters and query strings.
• Manage browser history.

React Router is essential in building SPAs because it allows you to create a seamless navigation experience without reloading the entire page.

2. Key Features of React Router

• Declarative Routing: You define routes in your React components using JSX, making the code more readable and declarative.
• Nested Routes: You can create routes within other routes to handle complex layouts.
• Dynamic Routing: React Router allows you to handle dynamic parameters in URLs (e.g., /user/:id).
• Programmatic Navigation: It provides APIs for navigating programmatically, without relying on user interaction.
• History Management: React Router uses the browser’s history API to manage URL changes and navigation.

3. How to Install React Router

To use React Router in your application, you first need to install it via npm or yarn:

npm install react-router-dom

or

yarn add react-router-dom

4. Basic Setup and Usage

Once installed, you can import and use React Router components in your app.

Basic Example

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

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

function About() {
  return <h2>About Page</h2>;
}

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

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

export default App;

5. Explanation of Components

• <BrowserRouter>: This is the router component that uses the HTML5 history API to keep your UI in sync with the URL.
• <Route>: This component defines a mapping between a URL path and a React component. It renders the specified component when the URL matches the path.
• <Link>: This component is used to navigate to different routes within your application without reloading the page.
• <Switch>: This component renders the first matching route inside it, ensuring that only one route is rendered at a time.

6. Dynamic Routing with Parameters

React Router allows you to define routes that accept dynamic parameters in the URL. You can access these parameters inside your components.

Example:

function UserProfile({ match }) {
  return <h2>User ID: {match.params.id}</h2>;
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/user/:id" component={UserProfile} />
      </Switch>
    </Router>
  );
}

In this example:

• The route /user/:id accepts a dynamic parameter (id).
• When navigating to /user/1, the UserProfile component will display User ID: 1.

7. Programmatic Navigation

You can also navigate programmatically using the history object that React Router provides. This is particularly useful in cases where navigation is triggered by events other than clicking a link (e.g., after a form submission).

Example:

import React from 'react';
import { useHistory } from 'react-router-dom';

function RedirectButton() {
  const history = useHistory();

  const handleClick = () => {
    history.push('/about');  // Programmatically navigate to /about
  };

  return <button onClick={handleClick}>Go to About Page</button>;
}

function App() {
  return (
    <Router>
      <RedirectButton />
    </Router>
  );
}

8. Nested Routes

React Router supports nested routes, which allow you to build layouts with multiple sections that each have their own routes.

Example of Nested Routes:

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <Route path="/dashboard/overview" component={Overview} />
      <Route path="/dashboard/stats" component={Stats} />
    </div>
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/dashboard" component={Dashboard} />
      </Switch>
    </Router>
  );
}