React Router & Next.js App Router Architecture

Build seamless Single Page Applications (SPAs) with modern declarative routing, dynamic parameters, and instant page transitions.

1. Client-Side Routing vs Multi-Page Apps

Traditional Websites: Every link click triggers a full browser reload, fetching HTML from the server and reloading all CSS/JS assets from scratch.

Single Page Applications (SPAs): The browser loads one initial bundle. When links are clicked, client-side routing intercepts navigation, updates the browser URL via the History API, and renders matching components instantly without any page flash.

2. Declarative Navigation with Link

Never use standard HTML <a> tags for internal links in React or Next.js, as they trigger full page reloads. Always use the optimized <Link> component:

⊞Code Example

import Link from 'next/link';

export function NavigationBar() {

return (

HTML5 Lessons

</Link>

CSS3 Mastery

</Link>

React.js Architecture

</Link>

Node.js Backend

</Link>

</nav>

);

}

3. Programmatic Navigation with useRouter

When you need to redirect users after an asynchronous action (such as login completion or quiz submission), use programmatic navigation:

⊞Code Example

'use client';

import { useRouter } from 'next/navigation';

export function QuizSubmitButton({ score, totalQuestions }) {

const router = useRouter();

const handleFinish = async () => {

// Save student score to database

await saveScore(score);

// Programmatically navigate to results page

router.push('/quiz/results');

};

return (

<button

onClick={handleFinish}

className="px-6 py-2.5 bg-[#04AA6D] hover:bg-[#039861] text-white font-black rounded-xl shadow-lg"

Complete Assessment

</button>

);

}

4. Dynamic Route Segments

Dynamic segments allow your application to render matching content from database slugs (e.g. /react/[slug]):

⊞Code Example

// src/app/react/[slug]/page.tsx

export default async function LessonPage({ params }) {

const { slug } = await params;

return (

<h1 className="text-3xl font-extrabold text-white">Active Lesson: {slug}</h1>

</div>

);

}

Build seamless Single Page Applications (SPAs) with modern declarative routing, dynamic parameters, and instant page transitions.

1. Client-Side Routing vs Multi-Page Apps

Traditional Websites: Every link click triggers a full browser reload, fetching HTML from the server and reloading all CSS/JS assets from scratch.

2. Declarative Navigation with Link

Never use standard HTML <a> tags for internal links in React or Next.js, as they trigger full page reloads. Always use the optimized <Link> component:

⊞Code Example

import Link from 'next/link';

export function NavigationBar() {

return (

HTML5 Lessons

</Link>

CSS3 Mastery

</Link>

React.js Architecture

</Link>

Node.js Backend

</Link>

</nav>

);

}

3. Programmatic Navigation with useRouter

When you need to redirect users after an asynchronous action (such as login completion or quiz submission), use programmatic navigation:

⊞Code Example

'use client';

import { useRouter } from 'next/navigation';

export function QuizSubmitButton({ score, totalQuestions }) {

const router = useRouter();

const handleFinish = async () => {

// Save student score to database

await saveScore(score);

// Programmatically navigate to results page

router.push('/quiz/results');

};

return (

<button

onClick={handleFinish}

className="px-6 py-2.5 bg-[#04AA6D] hover:bg-[#039861] text-white font-black rounded-xl shadow-lg"

Complete Assessment

</button>

);

}

4. Dynamic Route Segments

Dynamic segments allow your application to render matching content from database slugs (e.g. /react/[slug]):

⊞Code Example

// src/app/react/[slug]/page.tsx

export default async function LessonPage({ params }) {

const { slug } = await params;

return (

<h1 className="text-3xl font-extrabold text-white">Active Lesson: {slug}</h1>

</div>

);

}