Unmatched routes

This page explains how Next.js handles unmatched routes in parallel routing and how to implement fallback views.

Sub-navigation with parallel routes

Suppose you have a dashboard with parallel routes for analytics, revenue, and notifications. Within the notifications section, you want to implement navigation between current and archived views. Here’s how to set it up:

• Directoryapp/

  • Directorydashboard/

    • Directory@analytics/

      • page.tsx
    • Directory@revenue/

      • page.tsx
    • Directory@notifications/

      • Directoryarchived/

        • page.tsx
      • page.tsx
    • layout.tsx

// app/dashboard/@notifications/page.tsx
import Link from "next/link";

export default function Notifications() {
  return (
    <div>
      <h2>Notifications</h2>
      <Link href="/dashboard/archived">View Archived</Link>
      <div>Current notifications content...</div>
    </div>
  );
}

// app/dashboard/@notifications/archived/page.tsx
import Link from "next/link";

export default function ArchivedNotifications() {
  return (
    <div>
      <h2>Archived Notifications</h2>
      <Link href="/dashboard">View Current</Link>
      <div>Archived notifications content...</div>
    </div>
  );
}

Visit /dashboard to see the current notifications. Clicking the “View Archived” link updates the URL to /dashboard/archived and navigates to the archived notifications page. The other two slots, analytics and revenue, maintain their current state. However, if you reload the page, you’ll see a 404 error as there are no matching routes corresponding to /dashboard/archived for the analytics and revenue slots.

Navigation behavior

Next.js handles unmatched routes differently based on how navigation occurs:

UI navigation behavior

During client-side navigation (clicking links):

• Content in unmatched slots is preserved
• Example: When navigating from /dashboard to /dashboard/archived:
  • Notifications slot shows archived content
  • Other slots (analytics, revenue) maintain their current state

Page reload behavior

During a page reload:

• Next.js looks for default.tsx files in unmatched slots

• Without default.tsx, Next.js returns a 404 error

• Example: Reloading /dashboard/archived:

  • Notifications slot shows archived content
  • Other slots render fallback content from their default.tsx files
  • If there is no default.tsx file, Next.js returns a 404 error

Implementing fallback views

Add default.tsx files to prevent 404 errors during page reloads:

• Directoryapp/

  • Directorydashboard/

    • Directory@analytics/

      • default.tsx Fallback for analytics slot
    • Directory@revenue/

      • default.tsx Fallback for revenue slot
    • default.tsx Fallback for children slot

app/dashboard/default.tsx

export default function DefaultDashboard() {
  return <div>Default dashboard view</div>;
}

// app/dashboard/@analytics/default.tsx
export default function DefaultAnalytics() {
  return <div>Default analytics view</div>;
}

// app/dashboard/@revenue/default.tsx
export default function DefaultRevenue() {
  return <div>Default revenue view</div>;
}

Good to know

• Default files only trigger on page reload, not during client-side navigation
• Each parallel route slot can have its own default view
• Missing default files result in 404 errors on reload
• Default views help maintain a consistent UI during direct URL access
• Restart the dev server if you encounter issues