React Router Basics

React Router enables navigation between pages in your app.

Install

npm install react-router-dom

Basic Setup

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>
  );
}

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

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

URL Parameters

import { useParams } from 'react-router-dom';

<Route path="/user/:id" element={<User />} />

function User() {
  const { id } = useParams();
  return <h1>User ID: {id}</h1>;
}

Navigate Programmatically

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

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

  const handleLogin = () => {
    // After login
    navigate('/dashboard');
  };

  return <button onClick={handleLogin}>Login</button>;
}

404 Page

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

Remember

• Use Link for navigation
• Routes define pages
• useParams gets URL parameters
• useNavigate for programmatic navigation

Next: Learn Context API!