Discussion about using useRouter and hooks for programmatic navigation in Sanity.io

import {definePlugin} from 'sanity'
import {route, useRouter} from 'sanity/router'
import {useEffect} from 'react'
import {Box, Button} from '@sanity/ui'

const PATHS = ['view-1', 'view-2']

function MyTool() {
  const router = useRouter()

  // Set the default path if no path is set or if the path is not valid
  useEffect(() => {
    if (!PATHS.includes(router.state.path as string)) {
      router.navigate({path: PATHS[0]})
    }
  }, [router])

  return (
    <div>
      {PATHS.map((path) => (
        <Button
          key={path}
          mode="ghost"
          onClick={() => router.navigate({path})}
          selected={router.state.path === path}
          text={path}
        />
      ))}

      <Box padding={4}>
        {router.state.path === PATHS[0] && <div>View 1</div>}
        {router.state.path === PATHS[1] && <div>View 2</div>}
      </Box>
    </div>
  )
}

export const toolWithRouting = definePlugin({
  name: 'my-tool',
  tools: [
    {
      component: MyTool,
      name: 'my-tool',
      router: route.create('/', [route.create('/:path')]),
      title: 'Tool',
    },
  ],
})