useActiveParams

Returns URL parameters globally, updating even when the route using it is not focused.

Unlike useParams, this hook updates on every navigation regardless of which route is active. Use this for analytics, background operations, or global UI that needs to react to all route changes.

Basic Usage

import { useActiveParams } from 'one'

export default function AnalyticsTracker() {
  const params = useActiveParams()

  useEffect(() => {
    analytics.track('page_view', params)
  }, [params])

  return null
}

When to Use

Use useActiveParams for:

Analytics tracking from a root component
Global breadcrumbs or navigation UI
Background data sync based on current route
Debugging route state

Use useParams for:

Most component use cases
Avoiding unnecessary re-renders
Stack navigators where background screens shouldn’t update

Comparison

// Stack: /home -> /users/123 -> /users/123/edit
// Current screen: /users/123/edit

// In /users/123 component (background):
useParams()        // { id: '123' } - no updates
useActiveParams()  // Updates on every navigation

// In /users/123/edit component (focused):
useParams()        // { id: '123' }
useActiveParams()  // { id: '123' }

Example: Global Breadcrumbs

import { useActiveParams, usePathname } from 'one'

function Breadcrumbs() {
  const pathname = usePathname()
  const params = useActiveParams()

  // Always shows current route, even from a layout component
  return (
    <nav>
      <span>{pathname}</span>
      {params.id && <span> - ID: {params.id}</span>}
    </nav>
  )
}

useParams - Focus-aware params (recommended for most uses)
usePathname - Get just the pathname

PreviousFAQ

Environment

Edit this page on GitHub.

useActiveParams

Basic Usage

When to Use

Comparison

Example: Global Breadcrumbs

Related