Sanity Library Reference Docs
    Preparing search index...
    • 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: navigateFn receives 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:

      • In an iframe (Comlink), inbound type may be 'push', 'replace' or 'pop'. Reporting is optional because the bridge already forwards the iframe's own pushState; a reported type is ignored and the host applies the URL as a replace. Dashboard-scoped reports are dropped with a console warning.
      • In a federated app (message bus), inbound type is 'push' or 'replace'; 'pop' is never sent. Reporting is required because the app's router does not reach the host, and type is honoured. Until the Dashboard publishes the app's base path, in-app reports are dropped with a console warning.

      Parameters

      • navigateFn: (options: { path: string; type: "pop" | "push" | "replace" }) => void = ignoreInbound

        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 perform

        Optional. Omit it when the app only sends the user somewhere and has no router of its own; inbound navigations are then ignored. An app with its own router must pass it, or the router stops following the Dashboard's back and forward navigation and links into the app.

      Returns NavigateToDashboardPath

      A 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
      }