useRouter()

Access router state and navigation functions.

Import

import { useRouter } from 'flexium/router'

Signature

function useRouter(): RouterContext

interface RouterContext {
  path: Accessor<string>
  params: Accessor<Record<string, string>>
  query: Accessor<Record<string, string>>
  navigate: (path: string, options?: NavigateOptions) => void
  back: () => void
  forward: () => void
}

Returns

Property	Type	Description
path	Accessor<string>	Current route path
params	Accessor<Record<string, string>>	Route parameters
query	Accessor<Record<string, string>>	Query string parameters
navigate	(path, options?) => void	Navigate programmatically
back	() => void	Go back in history
forward	() => void	Go forward in history

Usage

Access Current Path

function Breadcrumb() {
  const { path } = useRouter()

  return <span>Current: {path}</span>
}

Access Route Parameters

// Route: /users/:id
function UserProfile() {
  const { params } = useRouter()

  return <div>User ID: {params.id}</div>
}

Access Query Parameters

// URL: /search?q=hello&sort=date
function SearchPage() {
  const { query } = useRouter()

  return (
    <div>
      <p>Search: {query.q}</p>
      <p>Sort: {query.sort}</p>
    </div>
  )
}

Programmatic Navigation

function LoginForm() {
  const { navigate } = useRouter()

  const handleSubmit = async (e) => {
    e.preventDefault()
    await login(credentials)
    navigate('/dashboard')
  }

  return <form onsubmit={handleSubmit}>...</form>
}

Navigate with Options

const { navigate } = useRouter()

// Replace current history entry
navigate('/login', { replace: true })

// With state
navigate('/checkout', { state: { cartId: '123' } })

History Navigation

function NavigationControls() {
  const { back, forward } = useRouter()

  return (
    <div>
      <button onclick={back}>← Back</button>
      <button onclick={forward}>Forward →</button>
    </div>
  )
}

Conditional Redirect

function ProtectedPage() {
  const { navigate } = useRouter()
  const { user } = context(AuthContext)

  use(() => {
    if (!user) {
      navigate('/login', { replace: true })
    }
  })

  return user ? <Dashboard /> : null
}

Dynamic Route Updates

function Pagination() {
  const { query, navigate, path } = useRouter()

  const goToPage = (page) => {
    navigate(`${path}?page=${page}`)
  }

  return (
    <div>
      <span>Page {query.page || 1}</span>
      <button onclick={() => goToPage((parseInt(query.page) || 1) + 1)}>
        Next
      </button>
    </div>
  )
}

Behavior

• Returns reactive accessors for route state
• navigate uses History API
• Parameters update reactively on route change

Notes

• Must be used within a Routes component
• All return values are reactive
• Use use() with deps to react to route changes

Demo

See Also

• <Routes /> - Root routing component
• <Route /> - Route definitions
• <Link /> - Navigation links