Client Navigation

Use the client router for navigation between pages without full page loads.

Link Component

import Link from '@dex/router/client/link'

export default function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/users/123">User 123</Link>
    </nav>
  )
}

useRouter Hook

Programmatic navigation:

import { useRouter } from '@dex/router/client'

export default function BackButton() {
  const router = useRouter()
  
  return (
    <button onClick={() => router.back()}>
      Go Back
    </button>
  )
}

useParams Hook

Access route parameters:

import { useParams, useRouter } from '@dex/router/client'

export default function UserPage() {
  const { id } = useParams()
  const router = useRouter()
  
  return (
    <div>
      <h1>User: {id}</h1>
      <button onClick={() => router.push('/users')}>
        All Users
      </button>
    </div>
  )
}

router.push vs window.location

Use router.push() for client-side navigation:

// Client-side (no full reload)
router.push('/about')

// Full page load
window.location.href = '/about'

See Also

Routing Rules — Route patterns
Dynamic Routes — Route parameters
SPA Fallback — How client routing works

Router

Previous Page

Dynamic Routes

Next Page

On this page

Client Navigation Link Component useRouter Hook useParams Hook router.push vs window.location See Also