fix: use fullPath as from in Route/RouteApi useNavigate (#3684)

fixes #3679

Author: schiller-manuel

packages/react-router/src/fileRoute.ts

@@ -7,6 +7,7 @@ import { useLoaderData } from './useLoaderData'
 import { useSearch } from './useSearch'
 import { useParams } from './useParams'
 import { useNavigate } from './useNavigate'
+import { useRouter } from './useRouter'
 import type { UseParamsRoute } from './useParams'
 import type { UseMatchRoute } from './useMatch'
 import type { UseSearchRoute } from './useSearch'
@@ -214,7 +215,8 @@ export class LazyRoute<TRoute extends AnyRoute> {
   }
 
   useNavigate = () => {
-    return useNavigate({ from: this.options.id })
+    const router = useRouter()
+    return useNavigate({ from: router.routesById[this.options.id].fullPath })
   }
 }
 

packages/react-router/src/route.ts

@@ -7,6 +7,7 @@ import { useSearch } from './useSearch'
 import { notFound } from './not-found'
 import { useNavigate } from './useNavigate'
 import { useMatch } from './useMatch'
+import { useRouter } from './useRouter'
 import type {
   AnyContext,
   AnyRoute,
@@ -133,7 +134,8 @@ export class RouteApi<TId, TRouter extends AnyRouter = RegisteredRouter> {
   useNavigate = (): UseNavigateResult<
     RouteTypesById<TRouter, TId>['fullPath']
   > => {
-    return useNavigate({ from: this.id as string })
+    const router = useRouter()
+    return useNavigate({ from: router.routesById[this.id as string].fullPath })
   }
 
   notFound = (opts?: NotFoundError) => {
@@ -528,7 +530,7 @@ export class Route<
   }
 
   useNavigate = (): UseNavigateResult<TFullPath> => {
-    return useNavigate({ from: this.id })
+    return useNavigate({ from: this.fullPath })
   }
 }
 

packages/react-router/tests/useNavigate.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import '@testing-library/jest-dom/vitest'
-import { afterEach, expect, test, vi } from 'vitest'
+import { afterEach, describe, expect, test, vi } from 'vitest'
 import {
   cleanup,
   configure,
@@ -18,6 +18,7 @@ import {
   createRoute,
   createRouteMask,
   createRouter,
+  getRouteApi,
   useNavigate,
   useParams,
 } from '../src'
@@ -1336,140 +1337,152 @@ test('<Navigate> navigates only once in <StrictMode>', async () => {
   expect(navigateSpy.mock.calls.length).toBe(1)
 })
 
-test('when on /posts/$postId and navigating to ../ with default `from` /posts', async () => {
-  const rootRoute = createRootRoute()
-
-  const IndexComponent = () => {
-    const navigate = useNavigate()
-    return (
-      <React.Fragment>
-        <h1 data-testid="index-heading">Index</h1>
-        <button onClick={() => navigate({ to: '/posts' })}>Posts</button>
-        <button
-          data-testid="index-to-first-post-btn"
-          onClick={() =>
-            navigate({
-              to: '/posts/$postId/details',
-              params: { postId: 'id1' },
-            })
-          }
-        >
-          To first post
-        </button>
-      </React.Fragment>
-    )
-  }
+describe('when on /posts/$postId and navigating to ../ with default `from` /posts', () => {
+  async function runTest(navigateVia: 'Route' | 'RouteApi') {
+    const rootRoute = createRootRoute()
 
-  const indexRoute = createRoute({
-    getParentRoute: () => rootRoute,
-    path: '/',
-    component: IndexComponent,
-  })
-
-  const layoutRoute = createRoute({
-    getParentRoute: () => rootRoute,
-    id: '_layout',
-    component: () => {
+    const IndexComponent = () => {
+      const navigate = useNavigate()
       return (
         <>
-          <h1>Layout</h1>
+          <h1 data-testid="index-heading">Index</h1>
+          <button onClick={() => navigate({ to: '/posts' })}>Posts</button>
+          <button
+            data-testid="index-to-first-post-btn"
+            onClick={() =>
+              navigate({
+                to: '/posts/$postId/details',
+                params: { postId: 'id1' },
+              })
+            }
+          >
+            To first post
+          </button>
+        </>
+      )
+    }
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+    })
+
+    const layoutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      id: '_layout',
+      component: () => {
+        return (
+          <>
+            <h1>Layout</h1>
+            <Outlet />
+          </>
+        )
+      },
+    })
+
+    const PostsComponent = () => {
+      const routeNavigate = postsRoute.useNavigate()
+      const routeApiNavigate = getRouteApi('/_layout/posts').useNavigate()
+      return (
+        <>
+          <h1>Posts</h1>
+          <button
+            data-testid="btn-to-home"
+            onClick={() => {
+              if (navigateVia === 'Route') {
+                routeNavigate({ to: '../' })
+              } else {
+                routeApiNavigate({ to: '../' })
+              }
+            }}
+          >
+            To Home
+          </button>
           <Outlet />
         </>
       )
-    },
-  })
-
-  const PostsComponent = () => {
-    const navigate = useNavigate({ from: '/posts' })
-    return (
-      <React.Fragment>
-        <h1>Posts</h1>
-        <button
-          data-testid="btn-to-home"
-          onClick={() => navigate({ to: '../' })}
-        >
-          To Home
-        </button>
-        <Outlet />
-      </React.Fragment>
-    )
-  }
-
-  const postsRoute = createRoute({
-    getParentRoute: () => layoutRoute,
-    path: 'posts',
-    component: PostsComponent,
-  })
-
-  const PostComponent = () => {
-    const params = useParams({ strict: false })
-    return (
-      <React.Fragment>
-        <span>Params: {params.postId}</span>
-        <Outlet />
-      </React.Fragment>
-    )
-  }
+    }
 
-  const postRoute = createRoute({
-    getParentRoute: () => postsRoute,
-    path: '$postId',
-    component: PostComponent,
-  })
+    const postsRoute = createRoute({
+      getParentRoute: () => layoutRoute,
+      path: 'posts',
+      component: PostsComponent,
+    })
 
-  const PostIndexComponent = () => {
-    return (
-      <>
-        <h1>Post Index</h1>
-      </>
-    )
-  }
+    const PostComponent = () => {
+      const params = useParams({ strict: false })
+      return (
+        <>
+          <span>Params: {params.postId}</span>
+          <Outlet />
+        </>
+      )
+    }
 
-  const postIndexRoute = createRoute({
-    getParentRoute: () => postRoute,
-    path: '/',
-    component: PostIndexComponent,
-  })
+    const postRoute = createRoute({
+      getParentRoute: () => postsRoute,
+      path: '$postId',
+      component: PostComponent,
+    })
 
-  const DetailsComponent = () => {
-    return (
-      <>
-        <h1 data-testid="details-heading">Details!</h1>
-      </>
-    )
-  }
+    const PostIndexComponent = () => {
+      return (
+        <>
+          <h1>Post Index</h1>
+        </>
+      )
+    }
 
-  const detailsRoute = createRoute({
-    getParentRoute: () => postRoute,
-    path: 'details',
-    component: DetailsComponent,
-  })
+    const postIndexRoute = createRoute({
+      getParentRoute: () => postRoute,
+      path: '/',
+      component: PostIndexComponent,
+    })
 
-  const router = createRouter({
-    routeTree: rootRoute.addChildren([
-      indexRoute,
-      layoutRoute.addChildren([
-        postsRoute.addChildren([
-          postRoute.addChildren([postIndexRoute, detailsRoute]),
+    const DetailsComponent = () => {
+      return (
+        <>
+          <h1 data-testid="details-heading">Details!</h1>
+        </>
+      )
+    }
+
+    const detailsRoute = createRoute({
+      getParentRoute: () => postRoute,
+      path: 'details',
+      component: DetailsComponent,
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([
+        indexRoute,
+        layoutRoute.addChildren([
+          postsRoute.addChildren([
+            postRoute.addChildren([postIndexRoute, detailsRoute]),
+          ]),
         ]),
       ]),
-    ]),
-  })
+    })
 
-  render(<RouterProvider router={router} />)
+    render(<RouterProvider router={router} />)
 
-  const postsButton = await screen.findByTestId('index-to-first-post-btn')
+    const postsButton = await screen.findByTestId('index-to-first-post-btn')
 
-  fireEvent.click(postsButton)
+    fireEvent.click(postsButton)
 
-  expect(await screen.findByTestId('details-heading')).toBeInTheDocument()
+    expect(await screen.findByTestId('details-heading')).toBeInTheDocument()
 
-  expect(window.location.pathname).toEqual('/posts/id1/details')
+    expect(window.location.pathname).toEqual('/posts/id1/details')
+
+    const homeButton = await screen.findByTestId('btn-to-home')
 
-  const homeButton = await screen.findByTestId('btn-to-home')
+    fireEvent.click(homeButton)
 
-  fireEvent.click(homeButton)
+    expect(await screen.findByTestId('index-heading')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual('/')
+  }
 
-  expect(await screen.findByTestId('index-heading')).toBeInTheDocument()
-  expect(window.location.pathname).toEqual('/')
+  test('Route', () => runTest('Route'))
+  test('RouteApi', () => runTest('RouteApi'))
 })

packages/solid-router/src/fileRoute.ts

@@ -7,6 +7,7 @@ import { useLoaderData } from './useLoaderData'
 import { useSearch } from './useSearch'
 import { useParams } from './useParams'
 import { useNavigate } from './useNavigate'
+import { useRouter } from './useRouter'
 import type { UseParamsRoute } from './useParams'
 import type { UseMatchRoute } from './useMatch'
 import type { UseSearchRoute } from './useSearch'
@@ -208,7 +209,8 @@ export class LazyRoute<TRoute extends AnyRoute> {
   }
 
   useNavigate = () => {
-    return useNavigate({ from: this.options.id })
+    const router = useRouter()
+    return useNavigate({ from: router.routesById[this.options.id].fullPath })
   }
 }
 

packages/solid-router/src/route.ts

@@ -7,6 +7,7 @@ import { useSearch } from './useSearch'
 import { notFound } from './not-found'
 import { useNavigate } from './useNavigate'
 import { useMatch } from './useMatch'
+import { useRouter } from './useRouter'
 import type {
   AnyContext,
   AnyRoute,
@@ -128,7 +129,8 @@ export class RouteApi<TId, TRouter extends AnyRouter = RegisteredRouter> {
   useNavigate = (): UseNavigateResult<
     RouteTypesById<TRouter, TId>['fullPath']
   > => {
-    return useNavigate({ from: this.id as string })
+    const router = useRouter()
+    return useNavigate({ from: router.routesById[this.id as string].fullPath })
   }
 
   notFound = (opts?: NotFoundError) => {
@@ -516,7 +518,7 @@ export class Route<
   }
 
   useNavigate = (): UseNavigateResult<TFullPath> => {
-    return useNavigate({ from: this.id })
+    return useNavigate({ from: this.fullPath })
   }
 }