Expose react-router context hooks (useLocation, useNavigate, etc.) for admin customization

[firstbirdworks]

Hi Payload team,

I'm building custom admin components, and I'd love to use React Router hooks like useLocation() and useNavigate() to handle active states and navigation inside the admin interface.

Currently the admin UI is wrapped in a <BrowserRouter>, but its react-router-dom instance is not exposed to custom components. If I try to use useLocation() from my app’s installed version of react-router-dom (even matching versions), it throws:

Error: useLocation() may be used only in the context of a <Router> component.

This is due to module duplication, Payload and my app resolve separate instances of react-router-dom causing context mismatches.

Feature request:
Would you consider exposing the admin router context through a public API so custom components can hook into it safely?

Example:

import { useLocation, useNavigate } from 'payload/admin-router'
// or:
import { useLocation } from '@payloadcms/router-context'

This would allow plugin and route authors to:

• Dynamically highlight nav items based on the current pathname
• Navigate programmatically
• React to route changes inside the admin panel

Workaround:
I’m currently using window.location.pathname with useEffect as a workaround, but it’s fragile and not reactive. It would be far cleaner to rely on the React Router context already provided internally by Payload.

Related:
I noticed this was brought up before in plugin-template#7, but it was closed without a resolution. Reopening here to formally track this feature request and make admin extension development smoother. 🙏

[firstbirdworks]

Payload CMS migrated off React Router in v3.