Function setupRouter

packages/solid-router/tests/useNavigate.test.tsx:1480–1606

()

  'relative useNavigate with %s',
  ({ basepath }) => {
    const setupRouter = () => {
      const rootRoute = createRootRoute()
      const indexRoute = createRoute({
        getParentRoute: () => rootRoute,
        path: '/',
        component: () => {
          return <h1>Index Route</h1>
        },
      })
      const aRoute = createRoute({
        getParentRoute: () => rootRoute,
        path: 'a',
        component: () => {
          return (
            <>
              <h1>A Route</h1>
              <Outlet />
            </>
          )
        },
      })

      const bRoute = createRoute({
        getParentRoute: () => aRoute,
        path: 'b',
        component: function BRoute() {
          const navigate = useNavigate()
          return (
            <>
              <h1>B Route</h1>
              <button onClick={() => navigate({ to: '..' })}>
                Link to Parent
              </button>
            </>
          )
        },
      })

      const paramRoute = createRoute({
        getParentRoute: () => rootRoute,
        path: 'param/$param',
        component: function ParamRoute() {
          const navigate = useNavigate()
          return (
            <>
              <h1>Param Route</h1>
              <button
                onClick={() =>
                  navigate({ from: paramRoute.fullPath, to: './a' })
                }
              >
                Link to ./a
              </button>
              <button
                onClick={() => navigate({ params: { param: 'bar' } as any })}
              >
                Link to . with param:bar
              </button>