wwwwwwwwwwwwwwwwwww
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>
)
}
Related
- useParams - Focus-aware params (recommended for most uses)
- usePathname - Get just the pathname
Edit this page on GitHub.