Routing in React

Introduction to Routing

Routing allows single-page applications to update the URL and render different components without a full page reload.

Installation

# Next.js routing comes built-in; no extra install needed 

Basic Routing

// With Next.js App Router
// app/page.tsx (Home)
export default function HomePage() {
  return <h1>Home</h1>
}

// app/about/page.tsx
export default function AboutPage() {
  return <h1>About</h1>
}

Navigation with Link

Use Link to navigate without full reload:

import Link from 'next/link';
 
 function Navbar() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
    </nav>
  );
}
 

Route Parameters

Capture dynamic segments from the URL:

// app/user/[id]/page.tsx
import { useParams } from 'next/navigation';

export default function UserPage() {
  const params = useParams();
  return <p>User ID: {params.id}</p>;
}