Function to handle navigation; should accept:
path: a string, which will be a relative path (for example, 'my-route')type: 'push', 'replace', or 'pop', which will be the type of navigation to performA function the app calls to report its own in-app navigations to the Dashboard.
import {useNavigate} from '@sanity/sdk-react/dashboard'
import {useEffect} from 'react'
import {useLocation, useNavigate as useRouterNavigate} from 'react-router'
function DashboardNavigationSync() {
const routerNavigate = useRouterNavigate()
const {pathname, search, hash} = useLocation()
const navigate = useNavigate(({path, type}) => {
routerNavigate(path, {replace: type === 'replace'})
})
useEffect(() => {
navigate({path: `${pathname.slice(1)}${search}${hash}`})
}, [navigate, pathname, search, hash])
return null
}
A helper hook designed to be injected into routing components for apps within the Dashboard. It keeps the app's router and the Dashboard in two-way sync:
navigateFnreceives the navigations the Dashboard asks the app to perform, and the returned function reports the app's own in-app navigations back to the Dashboard so the browser URL and the Dashboard's router follow along.An in-app navigation the app reports is not echoed back through
navigateFn. A dashboard-scoped one that lands in this app is, because the app's router has not moved. The returned function is referentially stable.The two Dashboard runtimes differ:
typemay be'push','replace'or'pop'. Reporting is optional because the bridge already forwards the iframe's ownpushState; a reportedtypeis ignored and the host applies the URL as areplace. Dashboard-scoped reports are dropped with a console warning.typeis'push'or'replace';'pop'is never sent. Reporting is required because the app's router does not reach the host, andtypeis honoured. Until the Dashboard publishes the app's base path, in-app reports are dropped with a console warning.