---
title: "Routing and Navigation"
description: "The routing and navigation system allows you to define application pages, create nested layouts, handle route requests, and move between different routes seamlessly. By organizing files and folders..."
last_updated: "2026-09-23T10:57:21.229799+00:00"
canonical_url: "https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/core-concepts/routing-and-navigation"
---

## Overview

The routing and navigation system allows you to define application pages, create nested layouts, handle route requests, and move between different routes seamlessly. By organizing files and folders in a structured directory, you can build dynamic, multi-page web applications with shared layouts and built-in performance features.

---

## Defining Application Pages and Layouts

### Overview of Pages and Layouts

Application pages and layouts are structured using a file-system based routing approach.

*   **Pages:** Unique UI rendered for a specific route path.
*   **Layouts:** Shared UI that wraps around pages and sibling layouts, preserving state and avoiding re-renders during navigation.

### Key Concepts

*   **Route Segment:** Each folder in the routing hierarchy represents a route segment.
*   **Nested Layouts:** Layouts can be nested inside one another by placing layout files across different directory levels.
*   **Route Groups:** Folders wrapped in parentheses (such as `(dashboard)`) allow you to organize routes logically without affecting the URL path.
*   **Parallel Routes:** Slots prefixed with an `@` symbol (such as `@children`) let you render multiple pages simultaneously within the same layout.

---

## Navigating Between Routes

### Overview of Navigation Actions

You can navigate between different routes programmatically using the provided router methods or hooks.

### Available Router Actions

The router instance exposes methods to control client-side navigation and page state:

| Method | Description |
| :--- | :--- |
| `push(href, options)` | Navigate to the specified URL by adding a new history entry. |
| `replace(href, options)` | Navigate to the specified URL by replacing the current history entry. |
| `back()` | Navigate to the previous history entry. |
| `forward()` | Navigate to the next history entry. |
| `refresh()` | Refresh the current page to fetch latest data without losing client state. |
| `prefetch(href, options)` | Prefetch the specified route in the background for fast navigation. |

### Navigation Options

When calling `push` or `replace`, you can pass an options object to customize behavior:

*   `scroll`: Set to `false` to prevent the browser from scrolling to the top of the page upon navigation (defaults to `true`).
*   `transitionTypes`: An array of transition type strings passed to view transition APIs for custom animations.

---

## Reading Route Parameters and State

### Overview of Route Hooks

You can use built-in hooks within client components to read information about the active route.

### Available Hooks

*   `useParams()`: Reads dynamic route parameters from the current URL (for example, reading `team` from a dynamic route segment like `/dashboard/[team]`).
*   `usePathname()`: Returns the current URL pathname.
*   `useSearchParams()`: Returns a read-only `URLSearchParams` object for reading query parameters.
*   `useSelectedLayoutSegment()`: Returns the active route segment one level below the layout it is called from.
*   `useSelectedLayoutSegments()`: Returns all active route segments below the layout it is called from.

---

## Examples

### Programmatic Navigation Example

```tsx
'use client'

import { useRouter } from 'next/navigation'

export default function Page() {
  const router = useRouter()

  return (
    <button onClick={() => router.push('/dashboard')}>
      Go to Dashboard
    </button>
  )
}
```

### Reading Dynamic Parameters Example

```tsx
'use client'

import { useParams } from 'next/navigation'

export default function TeamPage() {
  // On a route like /dashboard/[team] where the URL is /dashboard/nextjs
  const { team } = useParams() // team === "nextjs"

  return <div>Current Team: {team}</div>
}
```

---

## Tips and Warnings

> [!TIP]
> Use `router.prefetch()` or rely on automatic link prefetching to load destination pages before the user clicks, ensuring instant transitions.

> [!WARNING]
> Hooks such as `useParams`, `usePathname`, and `useSearchParams` require your component to be marked with the `'use client'` directive at the top of the file.

## Related

- [Project Structure Overview](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/getting-started/project-structure-overview)
- [Server Client Components](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/core-concepts/server-client-components)


## Sitemap

See the full [sitemap](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/llms.txt) for all pages in this wiki.