React Router overview

Introduction

React Router helps you change pages in a React app without reloading the whole page. It makes your app feel faster and smoother.

You want to build a website with multiple pages like Home, About, and Contact.

You want users to navigate inside your app without waiting for full page reloads.

You want to show different content based on the URL in the browser.

You want to keep the app state while moving between pages.

You want to create links that users can bookmark or share.

Syntax

React

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

BrowserRouter wraps your app to enable routing.

Routes contains all your route definitions.

Examples

Basic setup with two routes: Home and About.

React

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

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

Link component changes the URL without reloading the page.

React

<Link to="/about">Go to About</Link>

Route with a dynamic parameter to show different profiles.

React

<Route path="/profile/:id" element={<Profile />} />

Sample Program

This React app uses React Router to switch between Home, About, and a dynamic Profile page. The navigation links let you move between pages without reloading.

React

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

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

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

function Profile() {
  const { id } = useParams();
  return <h2>Profile Page for user {id}</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <nav aria-label="Main navigation">
        <Link to="/" style={{ marginRight: '1rem' }}>Home</Link>
        <Link to="/about" style={{ marginRight: '1rem' }}>About</Link>
        <Link to="/profile/42">Profile 42</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/profile/:id" element={<Profile />} />
      </Routes>
    </BrowserRouter>
  );
}

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Important Notes

Always wrap your app in BrowserRouter to enable routing.

Use Link instead of <a> tags to avoid full page reloads.

Dynamic routes let you show different content based on URL parts.

Summary

React Router lets you build multi-page apps without reloading the browser.

Use BrowserRouter, Routes, and Route to define pages.

Link changes pages smoothly and updates the URL.