React — Router

Installing React Router

npm install react-router-dom

Basic Router Setup

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

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

Navigation Links

import { Link, NavLink } from 'react-router-dom';

function Navbar() {
    return (
        <nav>
            <Link to="/">Home</Link>
            <NavLink to="/about" className={({ isActive }) => 
                isActive ? 'active' : ''
            }>About</NavLink>
            <NavLink to="/contact">Contact</NavLink>
        </nav>
    );
}

Route Parameters

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

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

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

Nested Routes

function Dashboard() {
    return (
        <div>
            <h1>Dashboard</h1>
            <Outlet />
        </div>
    );
}

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/dashboard" element={<Dashboard />}>
                    <Route path="profile" element={<Profile />} />
                    <Route path="settings" element={<Settings />} />
                </Route>
            </Routes>
        </BrowserRouter>
    );
}

Programmatic Navigation

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

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

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

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

Router Examples

// Complete app with routing
function App() {
    return (
        <BrowserRouter>
            <Navbar />
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/users/:id" element={<UserProfile />} />
                <Route path="/dashboard" element={<Dashboard />}>
                    <Route path="profile" element={<Profile />} />
                    <Route path="settings" element={<Settings />} />
                </Route>
                <Route path="*" element={<NotFound />} />
            </Routes>
        </BrowserRouter>
    );
}

// Protected route
function ProtectedRoute({ children }) {
    const { isAuthenticated } = useAuth();

    if (!isAuthenticated) {
        return <Navigate to="/login" />;
    }

    return children;
}

// Usage
<Route
    path="/dashboard"
    element={
        <ProtectedRoute>
            <Dashboard />
        </ProtectedRoute>
    }
/>

Mini Practice

Write React code that:

1. Sets up React Router
2. Creates navigation links
3. Uses route parameters
4. Implements nested routes

Up Next

Next: Learn about Navigation.