React Router - Client-Side Routing

Installation

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>
        <Link to='/users'>Users</Link>
      </nav>

      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/users' element={<Users />} />
        <Route path='/users/:id' element={<UserDetail />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

useNavigate and useParams

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

function UserDetail() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();

  return (
    <div>
      <h1>User {id}</h1>
      <button onClick={() => navigate('/users')}>Back to Users</button>
      <button onClick={() => navigate(-1)}>Go Back</button>
    </div>
  );
}

Protected Routes

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { user } = useAuth();

  if (!user) {
    return <Navigate to='/login' replace />;
  }

  return <>{children}</>;
}

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

Nested Routes

<Route path='/dashboard' element={<DashboardLayout />}>
  <Route index element={<DashboardHome />} />
  <Route path='profile' element={<Profile />} />
  <Route path='settings' element={<Settings />} />
</Route>;

// In DashboardLayout
function DashboardLayout() {
  return (
    <div>
      <Sidebar />
      <main>
        <Outlet /> {/* Renders nested routes */}
      </main>
    </div>
  );
}

Lazy Loading Routes

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Profile = lazy(() => import('./pages/Profile'));

<Route
  path='/dashboard'
  element={
    <Suspense fallback={<Loading />}>
      <Dashboard />
    </Suspense>
  }
/>;