React Router

React Router is the standard routing library for React applications. It enables you to create single-page applications (SPAs) with navigation without full page reloads. By managing URL paths inside your app, React Router allows dynamic rendering of components based on the current URL.

Installing React Router

To start using React Router, install it via npm or yarn:

npm install react-router-dom
  

Basic Setup of React Router

The main building blocks of React Router are:

• <BrowserRouter> - Wraps your app and enables routing using the HTML5 history API.
• <Routes> - Container for all route definitions.
• <Route> - Defines a single route: which component to render on what path.
• <Link> - Used to create navigation links that don’t cause full page reload.

Example: Simple Routing Setup

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

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

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

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

function App() {
  return (
    <BrowserRouter>
      <nav style={{ padding: '12px', backgroundColor: '#e6f2ff', marginBottom: '24px' }}>
        <Link to="/" style={{ marginRight: '16px', textDecoration: 'none', color: '#0066cc', fontWeight: '600' }}>Home</Link>
        <Link to="/about" style={{ marginRight: '16px', textDecoration: 'none', color: '#0066cc', fontWeight: '600' }}>About</Link>
        <Link to="/contact" style={{ textDecoration: 'none', color: '#0066cc', fontWeight: '600' }}>Contact</Link>
      </nav>

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

export default App;
  

This example shows how you can define routes and render different components based on the URL path. The <Link> elements provide navigation without refreshing the page, keeping the SPA experience smooth.

Nested Routes

React Router supports nested routes, meaning you can define routes inside other routes to create hierarchical UI structures.

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <Link to="profile" style={{ marginRight: '12px' }}>Profile</Link>
        <Link to="settings">Settings</Link>
      </nav>

      <Routes>
        <Route path="profile" element=<p>User Profile Information</p> />
        <Route path="settings" element=<p>Settings Panel</p> />
      </Routes>
    </div>
  );
}
  

In this example, the Dashboard component contains its own nested routes for profile and settings. When the user navigates to /dashboard/profile, the profile content renders inside the Dashboard.

Programmatic Navigation

Sometimes you want to navigate to another route via code, for example after a form submission. React Router provides the useNavigate hook for this.

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

function Login() {
  const navigate = useNavigate();

  function handleSubmit(event) {
    event.preventDefault();
    // Perform login logic here...
    navigate('/dashboard');
  }

  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: '320px', margin: 'auto' }}>
      <button type="submit" style={{ padding: '10px 16px', backgroundColor: '#3399ff', color: '#fff', border: 'none', borderRadius: '6px' }}>Login</button>
    </form>
  );
}
  

After the login form is submitted, the user is programmatically redirected to the Dashboard page.

Summary

• React Router lets you build SPAs with dynamic navigation and multiple views.
• Use <BrowserRouter> to enable routing with clean URLs.
• Define routes with <Routes> and <Route>.
• Use <Link> for in-app navigation without page reload.
• Nested routes help structure complex layouts.
• Use the useNavigate hook for navigation from code.