From 937d4f12b0503acc06c4820e0a1d336c190cc461 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Wed, 27 Aug 2025 14:58:39 -0600
Subject: [PATCH 01/34] feat: url rewrites

---
 packages/history/src/index.ts        | 23 +++++++---
 packages/react-router/src/link.tsx   |  4 +-
 packages/router-core/src/location.ts | 44 ++++++++++++++++++
 packages/router-core/src/router.ts   | 67 +++++++++++++++++++++++++---
 packages/solid-router/src/link.tsx   |  4 +-
 5 files changed, 125 insertions(+), 17 deletions(-)

diff --git a/packages/history/src/index.ts b/packages/history/src/index.ts
index 3178cb90bbf..01fa5013113 100644
--- a/packages/history/src/index.ts
+++ b/packages/history/src/index.ts
@@ -44,6 +44,7 @@ export interface HistoryLocation extends ParsedPath {
 }
 
 export interface ParsedPath {
+  url: URL
   href: string
   pathname: string
   search: string
@@ -295,14 +296,10 @@ export function createBrowserHistory(opts?: {
   const _setBlockers = (newBlockers: Array<NavigationBlocker>) =>
     (blockers = newBlockers)
 
-  const createHref = opts?.createHref ?? ((path) => path)
+  const createHref = opts?.createHref ?? ((href) => href)
   const parseLocation =
     opts?.parseLocation ??
-    (() =>
-      parseHref(
-        `${win.location.pathname}${win.location.search}${win.location.hash}`,
-        win.history.state,
-      ))
+    (() => parseHref(win.location.href, win.history.state))
 
   // Ensure there is always a key to start
   if (!win.history.state?.__TSR_key && !win.history.state?.key) {
@@ -561,7 +558,10 @@ export function createHashHistory(opts?: { window?: any }): RouterHistory {
       return parseHref(hashHref, win.history.state)
     },
     createHref: (href) =>
-      `${win.location.pathname}${win.location.search}#${href}`,
+      new URL(
+        `${win.location.pathname}${win.location.search}#${href}`,
+        win.location.origin,
+      ).toString(),
   })
 }
 
@@ -617,12 +617,21 @@ export function parseHref(
   href: string,
   state: ParsedHistoryState | undefined,
 ): HistoryLocation {
+  let url!: URL
+
+  try {
+    url = new URL(href)
+  } catch {
+    url = new URL(href, 'http://localhost')
+  }
+
   const hashIndex = href.indexOf('#')
   const searchIndex = href.indexOf('?')
 
   const addedKey = createRandomKey()
 
   return {
+    url,
     href,
     pathname: href.substring(
       0,
diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index c72d0e85678..8955c6be45a 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -361,8 +361,8 @@ export function useLinkProps<
     href: disabled
       ? undefined
       : next.maskedLocation
-        ? router.history.createHref(next.maskedLocation.href)
-        : router.history.createHref(next.href),
+        ? next.maskedLocation.url.href
+        : next.url.href,
     ref: innerRef as React.ComponentPropsWithRef<'a'>['ref'],
     onClick: composeHandlers([onClick, handleClick]),
     onFocus: composeHandlers([onFocus, handleFocus]),
diff --git a/packages/router-core/src/location.ts b/packages/router-core/src/location.ts
index 4b09f7b7ff7..a14df74e6d8 100644
--- a/packages/router-core/src/location.ts
+++ b/packages/router-core/src/location.ts
@@ -2,12 +2,56 @@ import type { ParsedHistoryState } from '@tanstack/history'
 import type { AnySchema } from './validators'
 
 export interface ParsedLocation<TSearchObj extends AnySchema = {}> {
+  /**
+   * The URL instance representing the location. In future versions of TanStack Router,
+   * this will be the preferred way to access basic url information. This will
+   * not include derived properties like `fullPath`, the `search` object,
+   * `maskedLocation`, or anything else that can already be found on the `URL` class.
+   */
+  url: URL
+  /**
+   * @deprecated In future versions of TanStack Router, `href` will
+   * represent the full URL, including the origin. As a replacement,
+   * please upgrade to the new `fullPath` property, which is derived by
+   * combining `pathname`, `search`, and `hash`. like so:
+   * `${pathname}${searchStr}${hash}`. If you'r looking for the actual
+   * `href` of the location, you can use the `location.url.href` property.
+   */
   href: string
+  /**
+   * The full path of the location, including pathname, search, and hash.
+   * Does not include the origin. Is the equivalent of calling
+   * `url.replace(url.origin, '')`
+   */
+  fullPath: string
+  /**
+   * @deprecated In future versions of TanStack Router, this property will be removed.
+   * Please use the `location.url.pathname` property instead.
+   * The pathname of the location, including the leading slash.
+   */
   pathname: string
+  /**
+   * The parsed search parameters of the location in object form.
+   */
   search: TSearchObj
+  /**
+   * The search string of the location, including the leading question mark.
+   */
   searchStr: string
+  /**
+   * The in-memory state of the location as it *may* exist in the browser's history.
+   */
   state: ParsedHistoryState
+  /**
+   * The hash of the location, including the leading hash character.
+   */
   hash: string
+  /**
+   * The masked location of the location.
+   */
   maskedLocation?: ParsedLocation<TSearchObj>
+  /**
+   * Whether to unmask the location on reload.
+   */
   unmaskOnReload?: boolean
 }
diff --git a/packages/router-core/src/router.ts b/packages/router-core/src/router.ts
index 223984cf092..afe53973892 100644
--- a/packages/router-core/src/router.ts
+++ b/packages/router-core/src/router.ts
@@ -431,6 +431,27 @@ export interface RouterOptions<
   disableGlobalCatchBoundary?: boolean
 
   serializationAdapters?: TSerializationAdapters
+  /**
+   * Configures how the router will rewrite the location between the actual URL and the internal URL of the router.
+   *
+   * @default undefined
+   */
+  rewrite?: {
+    /**
+     * A function that will be called to rewrite the URL before it is interpreted by the router from the history instance.
+     *
+     * @default undefined
+     * @returns The rewritten URL or undefined if no rewrite is needed.
+     */
+    fromURL?: ({ url }: { url: URL }) => undefined | URL | string
+    /**
+     * A function that will be called to rewrite the URL before it is committed to the actual history instance from the router.
+     *
+     * @default undefined
+     * @returns The rewritten URL or undefined if no rewrite is needed.
+     */
+    toURL?: ({ url }: { url: URL }) => undefined | URL | string
+  }
 }
 
 export interface RouterState<
@@ -1030,20 +1051,37 @@ export class RouterCore<
     previousLocation,
   ) => {
     const parse = ({
-      pathname,
-      search,
-      hash,
+      url,
       state,
     }: HistoryLocation): ParsedLocation<FullSearchSchema<TRouteTree>> => {
+      // Before we do any processing, we need to allow rewrites to modify the URL
+      if (this.options.rewrite?.toURL) {
+        url = new URL(this.options.rewrite.toURL({ url }) || url)
+      }
+
+      // Make sure we derive all the properties we need from the URL object now
+      // (These used to come from the history location object, but won't in v2)
+
+      const { pathname, search, hash } = url
+
       const parsedSearch = this.options.parseSearch(search)
       const searchStr = this.options.stringifySearch(parsedSearch)
 
+      // Make sure our final url uses the re-stringified pathname, search, and has for consistency
+      // (We were already doing this, so just keeping it for now)
+      url.search = searchStr
+
+      const fullPath = url.href.replace(url.origin, '')
+
       return {
+        url,
+        fullPath,
         pathname,
         searchStr,
         search: replaceEqualDeep(previousLocation?.search, parsedSearch) as any,
         hash: hash.split('#').reverse()[0] ?? '',
-        href: `${pathname}${searchStr}${hash}`,
+        // TODO: v2 needs to supply the actual href (full URL) instead of the fullPath
+        href: fullPath,
         state: replaceEqualDeep(previousLocation?.state, state),
       }
     }
@@ -1606,14 +1644,31 @@ export class RouterCore<
       // Replace the equal deep
       nextState = replaceEqualDeep(currentLocation.state, nextState)
 
+      // Create the full path of the location
+      const fullPath = `${nextPathname}${searchStr}${hashStr}`
+
+      // Create the URL object
+      let url = new URL(fullPath, currentLocation.url.origin)
+
+      // If a rewrite function is provided, use it to rewrite the URL
+      if (this.options.rewrite?.toURL) {
+        url = new URL(this.options.rewrite.toURL({ url }) || url)
+      }
+
+      // Lastly, allow the history type to modify the URL
+      url = new URL(this.history.createHref(url.toString()))
+
       // Return the next location
       return {
+        url,
         pathname: nextPathname,
         search: nextSearch,
         searchStr,
         state: nextState as any,
         hash: hash ?? '',
-        href: `${nextPathname}${searchStr}${hashStr}`,
+        fullPath,
+        // TODO: v2 needs to supply the actual href (full URL) instead of the fullPath
+        href: fullPath,
         unmaskOnReload: dest.unmaskOnReload,
       }
     }
@@ -1816,7 +1871,7 @@ export class RouterCore<
     if (reloadDocument) {
       if (!href) {
         const location = this.buildLocation({ to, ...rest } as any)
-        href = this.history.createHref(location.href)
+        href = location.url.href
       }
       if (rest.replace) {
         window.location.replace(href)
diff --git a/packages/solid-router/src/link.tsx b/packages/solid-router/src/link.tsx
index 008483ac0d8..cd8dbf55428 100644
--- a/packages/solid-router/src/link.tsx
+++ b/packages/solid-router/src/link.tsx
@@ -391,8 +391,8 @@ export function useLinkProps<
     return _options().disabled
       ? undefined
       : maskedLocation
-        ? router.history.createHref(maskedLocation.href)
-        : router.history.createHref(nextLocation?.href)
+        ? maskedLocation.url.href
+        : nextLocation?.url.href
   })
 
   return Solid.mergeProps(

From 4d244265f00dcc9398071402cd6ca6f6035675e1 Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Sun, 17 Aug 2025 03:30:24 +0200
Subject: [PATCH 02/34] enhance relative navigation from determination

---
 packages/react-router/src/link.tsx        | 82 +++++++++++++----------
 packages/react-router/src/useNavigate.tsx | 13 ++--
 packages/router-core/src/router.ts        | 20 ++++--
 3 files changed, 72 insertions(+), 43 deletions(-)

diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index 8955c6be45a..6cff0932e2a 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -99,19 +99,29 @@ export function useLinkProps<
     structuralSharing: true as any,
   })
 
-  const from = useMatch({
+  const matchIndex = useMatch({
     strict: false,
-    select: (match) => options.from ?? match.fullPath,
+    select: (match) => match.index,
   })
 
+  const getFrom = React.useCallback( () => {
+    const currentRouteMatches= router.matchRoutes(router.latestLocation, {
+      _buildLocation: false,
+    })
+
+    return options.from ??
+      currentRouteMatches.slice(-1)[0]?.fullPath ??
+      router.state.matches[matchIndex]!.fullPath
+  }, [router, options.from, matchIndex])
+
   const next = React.useMemo(
-    () => router.buildLocation({ ...options, from } as any),
+    () => router.buildLocation({ ...options, from: getFrom() } as any),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       router,
       currentSearch,
       options._fromLocation,
-      from,
+      options.from,
       options.hash,
       options.to,
       options.search,
@@ -182,7 +192,7 @@ export function useLinkProps<
 
   const doPreload = React.useCallback(
     () => {
-      router.preloadRoute({ ...options, from } as any).catch((err) => {
+      router.preloadRoute({ ...options, from: getFrom() } as any).catch((err) => {
         console.warn(err)
         console.warn(preloadWarning)
       })
@@ -192,7 +202,7 @@ export function useLinkProps<
       router,
       options.to,
       options._fromLocation,
-      from,
+      options.from,
       options.search,
       options.hash,
       options.params,
@@ -235,24 +245,18 @@ export function useLinkProps<
     }
   }, [disabled, doPreload, preload])
 
-  if (isExternal) {
-    return {
-      ...propsSafeToSpread,
-      ref: innerRef as React.ComponentPropsWithRef<'a'>['ref'],
-      type,
-      href: to,
-      ...(children && { children }),
-      ...(target && { target }),
-      ...(disabled && { disabled }),
-      ...(style && { style }),
-      ...(className && { className }),
-      ...(onClick && { onClick }),
-      ...(onFocus && { onFocus }),
-      ...(onMouseEnter && { onMouseEnter }),
-      ...(onMouseLeave && { onMouseLeave }),
-      ...(onTouchStart && { onTouchStart }),
-    }
-  }
+  const navigate = React.useCallback(() => {
+    router.navigate({
+      ...options,
+      from: getFrom(),
+      replace,
+      resetScroll,
+      hashScrollIntoView,
+      startTransition,
+      viewTransition,
+      ignoreBlocker,
+    })
+  }, [router, options, getFrom, replace, resetScroll, hashScrollIntoView, startTransition, viewTransition, ignoreBlocker])
 
   // The click handler
   const handleClick = (e: React.MouseEvent) => {
@@ -276,16 +280,26 @@ export function useLinkProps<
 
       // All is well? Navigate!
       // N.B. we don't call `router.commitLocation(next) here because we want to run `validateSearch` before committing
-      router.navigate({
-        ...options,
-        from,
-        replace,
-        resetScroll,
-        hashScrollIntoView,
-        startTransition,
-        viewTransition,
-        ignoreBlocker,
-      })
+      navigate()
+    }
+  }
+
+  if (isExternal) {
+    return {
+      ...propsSafeToSpread,
+      ref: innerRef as React.ComponentPropsWithRef<'a'>['ref'],
+      type,
+      href: to,
+      ...(children && { children }),
+      ...(target && { target }),
+      ...(disabled && { disabled }),
+      ...(style && { style }),
+      ...(className && { className }),
+      ...(onClick && { onClick }),
+      ...(onFocus && { onFocus }),
+      ...(onMouseEnter && { onMouseEnter }),
+      ...(onMouseLeave && { onMouseLeave }),
+      ...(onTouchStart && { onTouchStart }),
     }
   }
 
diff --git a/packages/react-router/src/useNavigate.tsx b/packages/react-router/src/useNavigate.tsx
index 1fcef979673..b4a1e1d395c 100644
--- a/packages/react-router/src/useNavigate.tsx
+++ b/packages/react-router/src/useNavigate.tsx
@@ -15,7 +15,7 @@ export function useNavigate<
 >(_defaultOpts?: {
   from?: FromPathOption<TRouter, TDefaultFrom>
 }): UseNavigateResult<TDefaultFrom> {
-  const { navigate, state } = useRouter()
+  const router = useRouter()
 
   // Just get the index of the current match to avoid rerenders
   // as much as possible
@@ -26,18 +26,23 @@ export function useNavigate<
 
   return React.useCallback(
     (options: NavigateOptions) => {
+      const currentRouteMatches= router.matchRoutes(router.latestLocation, {
+        _buildLocation: false,
+      })
+
       const from =
         options.from ??
         _defaultOpts?.from ??
-        state.matches[matchIndex]!.fullPath
+        currentRouteMatches.slice(-1)[0]?.fullPath ??
+        router.state.matches[matchIndex]!.fullPath
 
-      return navigate({
+      return router.navigate({
         ...options,
         from,
       })
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [_defaultOpts?.from, navigate],
+    [_defaultOpts?.from, router.navigate, router.latestLocation],
   ) as UseNavigateResult<TDefaultFrom>
 }
 
diff --git a/packages/router-core/src/router.ts b/packages/router-core/src/router.ts
index afe53973892..23d24377e5e 100644
--- a/packages/router-core/src/router.ts
+++ b/packages/router-core/src/router.ts
@@ -1493,14 +1493,24 @@ export class RouterCore<
       // First let's find the starting pathname
       // By default, start with the current location
       let fromPath = this.resolvePathWithBase(lastMatch.fullPath, '.')
-      const toPath = dest.to
-        ? this.resolvePathWithBase(fromPath, `${dest.to}`)
-        : this.resolvePathWithBase(fromPath, '.')
+      const destFromPath = dest.from && this.resolvePathWithBase(dest.from, '.')
+
+      const toPath = destFromPath
+          ? this.resolvePathWithBase(destFromPath, `${dest.to ?? "."}`)
+          : this.resolvePathWithBase(fromPath, `${dest.to ?? "."}`)
 
       const routeIsChanging =
         !!dest.to &&
-        !comparePaths(dest.to.toString(), fromPath) &&
-        !comparePaths(toPath, fromPath)
+        (
+          comparePaths(destFromPath ?? fromPath, fromPath) ?
+          (
+            !comparePaths(toPath, fromPath)
+          ) :
+          (
+            !comparePaths(toPath, destFromPath!) ||
+            !comparePaths(toPath, fromPath)
+          )
+        )
 
       // If the route is changing we need to find the relative fromPath
       if (dest.unsafeRelative === 'path') {

From 0bf006a74300763d1d2d2c3872216d1100043b12 Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Sun, 17 Aug 2025 03:31:02 +0200
Subject: [PATCH 03/34] update react-router tests

---
 packages/react-router/tests/link.test.tsx     | 715 +++++++++++++++++-
 .../react-router/tests/useNavigate.test.tsx   | 433 ++++++++++-
 2 files changed, 1143 insertions(+), 5 deletions(-)

diff --git a/packages/react-router/tests/link.test.tsx b/packages/react-router/tests/link.test.tsx
index 80578b6f4a3..8d0701563e1 100644
--- a/packages/react-router/tests/link.test.tsx
+++ b/packages/react-router/tests/link.test.tsx
@@ -33,6 +33,7 @@ import {
   useRouteContext,
   useRouterState,
   useSearch,
+  getRouteApi,
 } from '../src'
 import {
   getIntersectionObserverMock,
@@ -5073,7 +5074,7 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param Route</h1>
-              <Link to="./a">Link to ./a</Link>
+              <Link from={paramRoute.fullPath} to="./a">Link to ./a</Link>
               <Link to="c" unsafeRelative="path">
                 Link to c
               </Link>
@@ -5093,7 +5094,7 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param A Route</h1>
-              <Link to="..">Link to .. from /param/foo/a</Link>
+              <Link from={paramARoute.fullPath} to="..">Link to .. from /param/foo/a</Link>
               <Outlet />
             </>
           )
@@ -5407,3 +5408,713 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
     })
   },
 )
+
+test.each([true, false])(
+  'should navigate to current route when using "." in nested route structure from Index Route',
+  async (trailingSlash: boolean) => {
+    const tail = trailingSlash ? '/' : ''
+
+    const rootRoute = createRootRoute()
+
+    const IndexComponent = () => {
+      return (
+        <>
+          <Link
+            data-testid="posts-link"
+            to='/post'
+          >
+            Post
+          </Link>
+          <Link
+            data-testid="search-link"
+            to='.'
+            search={{param1: 'value1'}}
+          >
+            Search
+          </Link>
+          <Link
+            data-testid="search2-link"
+            to='.'
+            search={{param1: 'value2'}}
+          >
+            Search2
+          </Link>
+          <Outlet />
+        </>
+      )
+    }
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+      validateSearch: z.object({
+        param1: z.string().optional(),
+      }),
+    })
+
+    const postRoute = createRoute({
+      getParentRoute: () => indexRoute,
+      path: 'post',
+      component: () => (
+        <>
+          <div>Post</div>
+        </>
+      ),
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+      history,
+      trailingSlash: trailingSlash ? 'always' : 'never',
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const postButton = await screen.findByTestId('posts-link')
+    const searchButton = await screen.findByTestId('search-link')
+    const searchButton2 = await screen.findByTestId('search2-link')
+
+    await act(() => fireEvent.click(postButton))
+
+    expect(window.location.pathname).toBe(`/post${tail}`)
+
+    await act(() => fireEvent.click(searchButton))
+
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
+    expect(router.state.location.search).toEqual({ param1: 'value1' })
+
+    await act(() => fireEvent.click(searchButton2))
+
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
+    expect(router.state.location.search).toEqual({ param1: 'value2' })
+  },
+)
+
+test.each([true, false])(
+  'should navigate to current route with changing path params when using "." in nested route structure',
+  async (trailingSlash) => {
+    const tail = trailingSlash ? '/' : ''
+    const rootRoute = createRootRoute()
+
+    const IndexComponent = () => {
+      return (
+        <>
+          <h1 data-testid="index-heading">Index</h1>
+          <Link
+            data-testid="posts-link"
+            to='/posts'
+          >
+            Posts
+          </Link>
+        </>
+      )
+    }
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+    })
+
+    const layoutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      id: '_layout',
+      component: () => {
+        return (
+          <>
+            <h1>Layout</h1>
+            <Outlet />
+          </>
+        )
+      },
+    })
+
+    const PostsComponent = () => {
+      return (
+        <>
+          <h1 data-testid="posts-index-heading">Posts</h1>
+          <Link
+            data-testid="first-post-link"
+            to='$postId'
+            params={{ postId: 'id1' }}
+          >
+            To first post
+          </Link>
+          <Link
+            data-testid="second-post-link"
+            to='.'
+            params={{ postId: 'id2' }}
+          >
+            To second post
+          </Link>
+          <Outlet />
+        </>
+      )
+    }
+
+    const postsRoute = createRoute({
+      getParentRoute: () => layoutRoute,
+      path: 'posts',
+      component: PostsComponent,
+    })
+
+    const PostComponent = () => {
+      const params = useParams({ strict: false })
+      return (
+        <>
+          <span data-testid={`post-${params.postId}`}>
+            Params: {params.postId}
+          </span>
+        </>
+      )
+    }
+
+    const postRoute = createRoute({
+      getParentRoute: () => postsRoute,
+      path: '$postId',
+      component: PostComponent,
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([
+        indexRoute,
+        layoutRoute.addChildren([postsRoute.addChildren([postRoute])]),
+      ]),
+      trailingSlash: trailingSlash ? 'always' : 'never',
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const postsButton = await screen.findByTestId('posts-link')
+
+    await act(() => fireEvent.click(postsButton))
+
+    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts${tail}`)
+
+    const firstPostButton = await screen.findByTestId('first-post-link')
+
+    await act(() => fireEvent.click(firstPostButton))
+
+    expect(await screen.findByTestId('post-id1')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/id1${tail}`)
+
+    const secondPostButton = await screen.findByTestId('second-post-link')
+
+    await act(() => fireEvent.click(secondPostButton))
+
+    // expect(await screen.findByTestId('post-id2')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/id2${tail}`)
+  },
+)
+
+test.each([true, false])(
+  'should navigate to current route with search params when using "." in nested route structure from Index Route',
+  async (trailingSlash: boolean) => {
+    const tail = trailingSlash ? '/' : ''
+
+    const rootRoute = createRootRoute()
+
+    const IndexComponent = () => {
+      return (
+        <>
+          <Link
+            data-testid="posts-link"
+            to='/post'
+          >
+            Post
+          </Link>
+          <Link
+            data-testid="search-link"
+            to='.'
+            search={{param1: 'value1'}}
+          >
+            Search
+          </Link>
+          <Link
+            data-testid="search2-link"
+            to='/post'
+            search={{param1: 'value2'}}
+          >
+            Search2
+          </Link>
+          <Outlet />
+        </>
+      )
+    }
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+      validateSearch: z.object({
+        param1: z.string().optional(),
+      }),
+    })
+
+    const postRoute = createRoute({
+      getParentRoute: () => indexRoute,
+      path: 'post',
+      component: () => <div>Post</div>,
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+      history,
+      trailingSlash: trailingSlash ? 'always' : 'never',
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const postButton = await screen.findByTestId('posts-link')
+
+    await act(() => fireEvent.click(postButton))
+
+    expect(window.location.pathname).toBe(`/post${tail}`)
+
+    const searchButton = await screen.findByTestId('search-link')
+
+    await act(() => fireEvent.click(searchButton))
+
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
+    expect(router.state.location.search).toEqual({ param1: 'value1' })
+
+    const searchButton2 = await screen.findByTestId('search2-link')
+
+    await act(() => fireEvent.click(searchButton2))
+
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
+    expect(router.state.location.search).toEqual({ param1: 'value2' })
+  },
+)
+
+test.each([true, false])(
+  'should navigate to from route when using "." in nested route structure from Index Route',
+  async (trailingSlash: boolean) => {
+    const tail = trailingSlash ? '/' : ''
+
+    const rootRoute = createRootRoute()
+
+    const IndexComponent = () => {
+      return (
+        <>
+          <Link
+            data-testid="posts-link"
+            to='/post'
+          >
+            Post
+          </Link>
+          <Link
+            data-testid="search-link"
+            to='.'
+            search={{param1: 'value1'}}
+          >
+            Search
+          </Link>
+          <Link
+            data-testid="home-link"
+            from='/'
+            to='.'
+          >
+            Go To Home
+          </Link>
+          <Outlet />
+        </>
+      )
+    }
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+      validateSearch: z.object({
+        param1: z.string().optional(),
+      }),
+    })
+
+    const postRoute = createRoute({
+      getParentRoute: () => indexRoute,
+      path: 'post',
+      component: () => <div>Post</div>,
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+      history,
+      trailingSlash: trailingSlash ? 'always' : 'never',
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const postButton = await screen.findByTestId('posts-link')
+
+    fireEvent.click(postButton)
+
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
+
+    const searchButton = await screen.findByTestId('search-link')
+
+    fireEvent.click(searchButton)
+
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
+    expect(router.state.location.search).toEqual({ param1: 'value1' })
+
+    const homeBtn = await screen.findByTestId('home-link')
+
+    fireEvent.click(homeBtn)
+
+    expect(router.state.location.pathname).toBe(`/`)
+    expect(router.state.location.search).toEqual({})
+  },
+)
+
+test.each([true, false])(
+  'should navigate to from route with path params when using "." in nested route structure',
+  async (trailingSlash) => {
+    const tail = trailingSlash ? '/' : ''
+    const rootRoute = createRootRoute()
+
+    const IndexComponent = () => {
+      return (
+        <>
+          <h1 data-testid="index-heading">Index</h1>
+          <Link
+            data-testid="posts-link"
+            to='/posts'
+          >
+            Posts
+          </Link>
+        </>
+      )
+    }
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+    })
+
+    const layoutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      id: '_layout',
+      component: () => {
+        return (
+          <>
+            <h1>Layout</h1>
+            <Outlet />
+          </>
+        )
+      },
+    })
+
+    const PostsComponent = () => {
+      return (
+        <>
+          <h1 data-testid="posts-index-heading">Posts</h1>
+          <Link
+            data-testid="first-post-link"
+            to='$postId'
+            params={{ postId: '1' }}
+          >
+            To first post
+          </Link>
+          <Link
+            data-testid="second-post-link"
+            to='$postId'
+            params={{ postId: '2' }}
+          >
+            To second post
+          </Link>
+          <Link
+            data-testid="to-posts-index-link"
+            from='/posts'
+            to='.'
+          >
+            To posts list
+          </Link>
+          <Outlet />
+        </>
+      )
+    }
+
+    const PostDetailComponent = () => {
+      const navigate = postDetailRoute.useNavigate()
+      return (
+        <>
+          <h1 data-testid="post-detail-index-heading">Post Detail</h1>
+          <Link
+            data-testid="post-info-link"
+            to='info'
+          >
+            To post info
+          </Link>
+          <Link
+            data-testid="post-notes-link"
+            to='notes'
+          >
+            To post notes
+          </Link>
+          <Link
+            data-testid="to-post-detail-index-link"
+            from='/posts/$postId'
+            to='.'
+          >
+            To index detail options
+          </Link>
+          <Outlet />
+        </>
+      )
+    }
+
+    const PostInfoComponent = () => {
+      return (
+        <>
+          <h1 data-testid="post-info-heading">Post Info</h1>
+        </>
+      )
+    }
+
+    const PostNotesComponent = () => {
+      return (
+        <>
+          <h1 data-testid="post-notes-heading">Post Notes</h1>
+        </>
+      )
+    }
+
+    const postsRoute = createRoute({
+      getParentRoute: () => layoutRoute,
+      path: 'posts',
+      component: PostsComponent,
+    })
+
+    const postDetailRoute = createRoute({
+      getParentRoute: () => postsRoute,
+      path: '$postId',
+      component: PostDetailComponent,
+    })
+
+    const postInfoRoute = createRoute({
+      getParentRoute: () => postDetailRoute,
+      path: 'info',
+      component: PostInfoComponent,
+    })
+
+    const postNotesRoute = createRoute({
+      getParentRoute: () => postDetailRoute,
+      path: 'notes',
+      component: PostNotesComponent,
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([
+        indexRoute,
+        layoutRoute.addChildren([postsRoute.addChildren([postDetailRoute.addChildren([postInfoRoute, postNotesRoute])])]),
+      ]),
+      trailingSlash: trailingSlash ? 'always' : 'never',
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const postsButton = await screen.findByTestId('posts-link')
+
+    fireEvent.click(postsButton)
+
+    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts${tail}`)
+
+    const firstPostButton = await screen.findByTestId('first-post-link')
+
+    fireEvent.click(firstPostButton)
+
+    expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+
+    const postInfoButton = await screen.findByTestId('post-info-link')
+
+    fireEvent.click(postInfoButton)
+
+    expect(await screen.findByTestId('post-info-heading')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
+
+    const toPostDetailIndexButton = await screen.findByTestId('to-post-detail-index-link')
+
+    fireEvent.click(toPostDetailIndexButton)
+
+    expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+    expect(
+      screen.queryByTestId("'post-info-heading"),
+    ).not.toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+
+    const postNotesButton = await screen.findByTestId('post-notes-link')
+
+    fireEvent.click(postNotesButton)
+
+    expect(await screen.findByTestId('post-notes-heading')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
+
+    const toPostsIndexButton = await screen.findByTestId('to-posts-index-link')
+
+    fireEvent.click(toPostsIndexButton)
+
+    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+    expect(
+      screen.queryByTestId("'post-notes-heading"),
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByTestId("'post-detail-index-heading"),
+    ).not.toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts${tail}`)
+
+    const secondPostButton = await screen.findByTestId('second-post-link')
+
+    fireEvent.click(secondPostButton)
+
+    expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/2${tail}`)
+  },
+)
+
+describe('when on /posts/$postId and navigating to ../ with default `from` /posts', () => {
+  async function runTest(navigateVia: 'Route' | 'RouteApi') {
+    const rootRoute = createRootRoute()
+
+    const IndexComponent = () => {
+      return (
+        <>
+          <h1 data-testid="index-heading">Index</h1>
+          <Link data-testid="posts-link" to='/posts'>Posts</Link>
+          <Link
+            data-testid="index-to-first-post-link"
+            to='/posts/$postId/details'
+            params={{ postId: 'id1' }}
+          >
+            To first post
+          </Link>
+        </>
+      )
+    }
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+    })
+
+    const layoutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      id: '_layout',
+      component: () => {
+        return (
+          <>
+            <h1>Layout</h1>
+            <Outlet />
+          </>
+        )
+      },
+    })
+
+    const PostsComponent = () => {
+      const linkVia = () => {
+        if (navigateVia === 'Route') {
+          return <Link from={postsRoute.fullPath} to='../' data-testid="link-to-home">To Home</Link>
+        }
+
+        const RouteApiLink = getRouteApi('/_layout/posts').Link
+
+        return <RouteApiLink to='../' data-testid="link-to-home">To Home</RouteApiLink>
+      }
+
+      return (
+        <>
+          <h1>Posts</h1>
+          {linkVia()}
+          <Outlet />
+        </>
+      )
+    }
+
+    const postsRoute = createRoute({
+      getParentRoute: () => layoutRoute,
+      path: 'posts',
+      component: PostsComponent,
+    })
+
+    const PostComponent = () => {
+      const params = useParams({ strict: false })
+      return (
+        <>
+          <span>Params: {params.postId}</span>
+          <Outlet />
+        </>
+      )
+    }
+
+    const postRoute = createRoute({
+      getParentRoute: () => postsRoute,
+      path: '$postId',
+      component: PostComponent,
+    })
+
+    const PostIndexComponent = () => {
+      return (
+        <>
+          <h1>Post Index</h1>
+        </>
+      )
+    }
+
+    const postIndexRoute = createRoute({
+      getParentRoute: () => postRoute,
+      path: '/',
+      component: PostIndexComponent,
+    })
+
+    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} />)
+
+    const postsButton = await screen.findByTestId('index-to-first-post-link')
+
+    fireEvent.click(postsButton)
+
+    expect(await screen.findByTestId('details-heading')).toBeInTheDocument()
+
+    expect(window.location.pathname).toEqual('/posts/id1/details')
+
+    const homeButton = await screen.findByTestId('link-to-home')
+
+    fireEvent.click(homeButton)
+
+    expect(await screen.findByTestId('index-heading')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual('/')
+  }
+
+  test('Route', () => runTest('Route'))
+  test('RouteApi', () => runTest('RouteApi'))
+})
diff --git a/packages/react-router/tests/useNavigate.test.tsx b/packages/react-router/tests/useNavigate.test.tsx
index 8d98abdf286..07b84d694fe 100644
--- a/packages/react-router/tests/useNavigate.test.tsx
+++ b/packages/react-router/tests/useNavigate.test.tsx
@@ -1504,7 +1504,8 @@ test.each([true, false])(
     })
 
     const PostsComponent = () => {
-      const navigate = postsRoute.useNavigate()
+      const navigate = useNavigate()
+
       return (
         <>
           <h1 data-testid="posts-index-heading">Posts</h1>
@@ -1776,6 +1777,432 @@ test.each([true, false])(
   },
 )
 
+test.each([true, false])(
+  'should navigate to current route with search params when using "." in nested route structure from Index Route',
+  async (trailingSlash: boolean) => {
+    const tail = trailingSlash ? '/' : ''
+
+    const rootRoute = createRootRoute()
+
+    const IndexComponent = () => {
+      const navigate = useNavigate()
+      return (
+        <>
+          <button
+            data-testid="posts-btn"
+            onClick={() => {
+              navigate({
+                to: '/post',
+              })
+            }}
+          >
+            Post
+          </button>
+          <button
+            data-testid="search-btn"
+            onClick={() =>
+              navigate({
+                to: '.',
+                search: {
+                  param1: 'value1',
+                },
+              })
+            }
+          >
+            Search
+          </button>
+          <button
+            data-testid="search2-btn"
+            onClick={() =>
+              navigate({
+                to: '/post',
+                search: {
+                  param1: 'value2',
+                },
+              })
+            }
+          >
+            Search2
+          </button>
+          <Outlet />
+        </>
+      )
+    }
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+      validateSearch: z.object({
+        param1: z.string().optional(),
+      }),
+    })
+
+    const postRoute = createRoute({
+      getParentRoute: () => indexRoute,
+      path: 'post',
+      component: () => <div>Post</div>,
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+      history,
+      trailingSlash: trailingSlash ? 'always' : 'never',
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const postButton = await screen.findByTestId('posts-btn')
+
+    fireEvent.click(postButton)
+
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
+
+    const searchButton = await screen.findByTestId('search-btn')
+
+    fireEvent.click(searchButton)
+
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
+    expect(router.state.location.search).toEqual({ param1: 'value1' })
+
+    const searchButton2 = await screen.findByTestId('search2-btn')
+
+    fireEvent.click(searchButton2)
+
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
+    expect(router.state.location.search).toEqual({ param1: 'value2' })
+  },
+)
+
+test.each([true, false])(
+  'should navigate to from route when using "." in nested route structure from Index Route',
+  async (trailingSlash: boolean) => {
+    const tail = trailingSlash ? '/' : ''
+
+    const rootRoute = createRootRoute()
+
+    const IndexComponent = () => {
+      const navigate = useNavigate()
+      return (
+        <>
+          <button
+            data-testid="posts-btn"
+            onClick={() => {
+              navigate({
+                to: '/post',
+              })
+            }}
+          >
+            Post
+          </button>
+          <button
+            data-testid="search-btn"
+            onClick={() =>
+              navigate({
+                to: '.',
+                search: {
+                  param1: 'value1',
+                },
+              })
+            }
+          >
+            Search
+          </button>
+          <button
+            data-testid="home-btn"
+            onClick={() =>
+              navigate({
+                from: '/',
+                to: '.'
+              })
+            }
+          >
+            Go To Home
+          </button>
+          <Outlet />
+        </>
+      )
+    }
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+      validateSearch: z.object({
+        param1: z.string().optional(),
+      }),
+    })
+
+    const postRoute = createRoute({
+      getParentRoute: () => indexRoute,
+      path: 'post',
+      component: () => <div>Post</div>,
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+      history,
+      trailingSlash: trailingSlash ? 'always' : 'never',
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const postButton = await screen.findByTestId('posts-btn')
+
+    fireEvent.click(postButton)
+
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
+
+    const searchButton = await screen.findByTestId('search-btn')
+
+    fireEvent.click(searchButton)
+
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
+    expect(router.state.location.search).toEqual({ param1: 'value1' })
+
+    const homeBtn = await screen.findByTestId('home-btn')
+
+    fireEvent.click(homeBtn)
+
+    expect(router.state.location.pathname).toBe(`/`)
+    expect(router.state.location.search).toEqual({})
+  },
+)
+
+test.each([true, false])(
+  'should navigate to from route with path params when using "." in nested route structure',
+  async (trailingSlash) => {
+    const tail = trailingSlash ? '/' : ''
+    const rootRoute = createRootRoute()
+
+    const IndexComponent = () => {
+      const navigate = useNavigate()
+      return (
+        <>
+          <h1 data-testid="index-heading">Index</h1>
+          <button
+            data-testid="posts-btn"
+            onClick={() => navigate({ to: '/posts' })}
+          >
+            Posts
+          </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 navigate = postsRoute.useNavigate()
+      return (
+        <>
+          <h1 data-testid="posts-index-heading">Posts</h1>
+          <button
+            data-testid="first-post-btn"
+            onClick={() =>
+              navigate({
+                to: '$postId',
+                params: { postId: '1' },
+              })
+            }
+          >
+            To first post
+          </button>
+          <button
+            data-testid="second-post-btn"
+            onClick={() =>
+              navigate({
+                to: '$postId',
+                params: { postId: '2' },
+              })
+            }
+          >
+            To second post
+          </button>
+          <button
+            data-testid="to-posts-index-btn"
+            onClick={() =>
+              navigate({
+                from: '/posts',
+                to: '.'
+              })
+            }
+          >
+            To posts list
+          </button>
+          <Outlet />
+        </>
+      )
+    }
+
+    const PostDetailComponent = () => {
+      const navigate = postDetailRoute.useNavigate()
+      return (
+        <>
+          <h1 data-testid="post-detail-index-heading">Post Detail</h1>
+          <button
+            data-testid="post-info-btn"
+            onClick={() =>
+              navigate({
+                to: 'info',
+              })
+            }
+          >
+            To post info
+          </button>
+          <button
+            data-testid="post-notes-btn"
+            onClick={() =>
+              navigate({
+                to: 'notes',
+              })
+            }
+          >
+            To post notes
+          </button>
+          <button
+            data-testid="to-post-detail-index-btn"
+            onClick={() =>
+              navigate({
+                from: '/posts/$postId',
+                to: '.'
+              })
+            }
+          >
+            To index detail options
+          </button>
+          <Outlet />
+        </>
+      )
+    }
+
+    const PostInfoComponent = () => {
+      return (
+        <>
+          <h1 data-testid="post-info-heading">Post Info</h1>
+        </>
+      )
+    }
+
+    const PostNotesComponent = () => {
+      return (
+        <>
+          <h1 data-testid="post-notes-heading">Post Notes</h1>
+        </>
+      )
+    }
+
+    const postsRoute = createRoute({
+      getParentRoute: () => layoutRoute,
+      path: 'posts',
+      component: PostsComponent,
+    })
+
+    const postDetailRoute = createRoute({
+      getParentRoute: () => postsRoute,
+      path: '$postId',
+      component: PostDetailComponent,
+    })
+
+    const postInfoRoute = createRoute({
+      getParentRoute: () => postDetailRoute,
+      path: 'info',
+      component: PostInfoComponent,
+    })
+
+    const postNotesRoute = createRoute({
+      getParentRoute: () => postDetailRoute,
+      path: 'notes',
+      component: PostNotesComponent,
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([
+        indexRoute,
+        layoutRoute.addChildren([postsRoute.addChildren([postDetailRoute.addChildren([postInfoRoute, postNotesRoute])])]),
+      ]),
+      trailingSlash: trailingSlash ? 'always' : 'never',
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const postsButton = await screen.findByTestId('posts-btn')
+
+    fireEvent.click(postsButton)
+
+    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts${tail}`)
+
+    const firstPostButton = await screen.findByTestId('first-post-btn')
+
+    fireEvent.click(firstPostButton)
+
+    expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+
+    const postInfoButton = await screen.findByTestId('post-info-btn')
+
+    fireEvent.click(postInfoButton)
+
+    expect(await screen.findByTestId('post-info-heading')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
+
+    const toPostDetailIndexButton = await screen.findByTestId('to-post-detail-index-btn')
+
+    fireEvent.click(toPostDetailIndexButton)
+
+    expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+    expect(
+      screen.queryByTestId("'post-info-heading"),
+    ).not.toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+
+    const postNotesButton = await screen.findByTestId('post-notes-btn')
+
+    fireEvent.click(postNotesButton)
+
+    expect(await screen.findByTestId('post-notes-heading')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
+
+    const toPostsIndexButton = await screen.findByTestId('to-posts-index-btn')
+
+    fireEvent.click(toPostsIndexButton)
+
+    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+    expect(
+      screen.queryByTestId("'post-notes-heading"),
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByTestId("'post-detail-index-heading"),
+    ).not.toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts${tail}`)
+
+    const secondPostButton = await screen.findByTestId('second-post-btn')
+
+    fireEvent.click(secondPostButton)
+
+    expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/2${tail}`)
+  },
+)
+
 describe('when on /posts/$postId and navigating to ../ with default `from` /posts', () => {
   async function runTest(navigateVia: 'Route' | 'RouteApi') {
     const rootRoute = createRootRoute()
@@ -1975,7 +2402,7 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param Route</h1>
-              <button onClick={() => navigate({ to: './a' })}>
+              <button onClick={() => navigate({ from: 'param/$param', to: './a' })}>
                 Link to ./a
               </button>
               <button
@@ -1997,7 +2424,7 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param A Route</h1>
-              <button onClick={() => navigate({ to: '..' })}>
+              <button onClick={() => navigate({ from: 'param/$param/a', to: '..' })}>
                 Link to .. from /param/foo/a
               </button>
               <Outlet />

From 8ad3f0aa85d1c07d6b12f177a41ff370562736fe Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Sun, 17 Aug 2025 14:06:19 +0200
Subject: [PATCH 04/34] some more test refining

---
 packages/react-router/tests/link.test.tsx     | 925 +++++++++---------
 .../react-router/tests/useNavigate.test.tsx   | 128 +--
 2 files changed, 480 insertions(+), 573 deletions(-)

diff --git a/packages/react-router/tests/link.test.tsx b/packages/react-router/tests/link.test.tsx
index 8d0701563e1..14a07f3e7af 100644
--- a/packages/react-router/tests/link.test.tsx
+++ b/packages/react-router/tests/link.test.tsx
@@ -24,6 +24,7 @@ import {
   createRoute,
   createRouteMask,
   createRouter,
+  getRouteApi,
   redirect,
   retainSearchParams,
   stripSearchParams,
@@ -33,7 +34,6 @@ import {
   useRouteContext,
   useRouterState,
   useSearch,
-  getRouteApi,
 } from '../src'
 import {
   getIntersectionObserverMock,
@@ -5409,573 +5409,576 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
   },
 )
 
-test.each([true, false])(
-  'should navigate to current route when using "." in nested route structure from Index Route',
-  async (trailingSlash: boolean) => {
-    const tail = trailingSlash ? '/' : ''
-
-    const rootRoute = createRootRoute()
+describe('relative links to current route', () => {
+  test.each([true, false])(
+    'should navigate to current route when using "." in nested route structure from Index Route',
+    async (trailingSlash: boolean) => {
+      const tail = trailingSlash ? '/' : ''
 
-    const IndexComponent = () => {
-      return (
-        <>
-          <Link
-            data-testid="posts-link"
-            to='/post'
-          >
-            Post
-          </Link>
-          <Link
-            data-testid="search-link"
-            to='.'
-            search={{param1: 'value1'}}
-          >
-            Search
-          </Link>
-          <Link
-            data-testid="search2-link"
-            to='.'
-            search={{param1: 'value2'}}
-          >
-            Search2
-          </Link>
-          <Outlet />
-        </>
-      )
-    }
+      const rootRoute = createRootRoute()
 
-    const indexRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: '/',
-      component: IndexComponent,
-      validateSearch: z.object({
-        param1: z.string().optional(),
-      }),
-    })
+      const IndexComponent = () => {
+        return (
+          <>
+            <Link
+              data-testid="posts-link"
+              to='/post'
+            >
+              Post
+            </Link>
+            <Link
+              data-testid="search-link"
+              to='.'
+              search={{param1: 'value1'}}
+            >
+              Search
+            </Link>
+            <Link
+              data-testid="search2-link"
+              to='.'
+              search={{param1: 'value2'}}
+            >
+              Search2
+            </Link>
+            <Outlet />
+          </>
+        )
+      }
 
-    const postRoute = createRoute({
-      getParentRoute: () => indexRoute,
-      path: 'post',
-      component: () => (
-        <>
-          <div>Post</div>
-        </>
-      ),
-    })
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+        validateSearch: z.object({
+          param1: z.string().optional(),
+        }),
+      })
 
-    const router = createRouter({
-      routeTree: rootRoute.addChildren([indexRoute, postRoute]),
-      history,
-      trailingSlash: trailingSlash ? 'always' : 'never',
-    })
+      const postRoute = createRoute({
+        getParentRoute: () => indexRoute,
+        path: 'post',
+        component: () => (
+          <>
+            <div>Post</div>
+          </>
+        ),
+      })
 
-    render(<RouterProvider router={router} />)
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+        history,
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
 
-    const postButton = await screen.findByTestId('posts-link')
-    const searchButton = await screen.findByTestId('search-link')
-    const searchButton2 = await screen.findByTestId('search2-link')
+      render(<RouterProvider router={router} />)
 
-    await act(() => fireEvent.click(postButton))
+      const postButton = await screen.findByTestId('posts-link')
+      const searchButton = await screen.findByTestId('search-link')
+      const searchButton2 = await screen.findByTestId('search2-link')
 
-    expect(window.location.pathname).toBe(`/post${tail}`)
+      await act(() => fireEvent.click(postButton))
 
-    await act(() => fireEvent.click(searchButton))
+      expect(window.location.pathname).toBe(`/post${tail}`)
 
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
-    expect(router.state.location.search).toEqual({ param1: 'value1' })
+      await act(() => fireEvent.click(searchButton))
 
-    await act(() => fireEvent.click(searchButton2))
+      expect(router.state.location.pathname).toBe(`/post${tail}`)
+      expect(router.state.location.search).toEqual({ param1: 'value1' })
 
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
-    expect(router.state.location.search).toEqual({ param1: 'value2' })
-  },
-)
+      await act(() => fireEvent.click(searchButton2))
 
-test.each([true, false])(
-  'should navigate to current route with changing path params when using "." in nested route structure',
-  async (trailingSlash) => {
-    const tail = trailingSlash ? '/' : ''
-    const rootRoute = createRootRoute()
+      expect(router.state.location.pathname).toBe(`/post${tail}`)
+      expect(router.state.location.search).toEqual({ param1: 'value2' })
+    },
+  )
 
-    const IndexComponent = () => {
-      return (
-        <>
-          <h1 data-testid="index-heading">Index</h1>
-          <Link
-            data-testid="posts-link"
-            to='/posts'
-          >
-            Posts
-          </Link>
-        </>
-      )
-    }
+  test.each([true, false])(
+    'should navigate to current route with search params when using "." in nested route structure from Index Route',
+    async (trailingSlash: boolean) => {
+      const tail = trailingSlash ? '/' : ''
 
-    const indexRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: '/',
-      component: IndexComponent,
-    })
+      const rootRoute = createRootRoute()
 
-    const layoutRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      id: '_layout',
-      component: () => {
+      const IndexComponent = () => {
         return (
           <>
-            <h1>Layout</h1>
+            <Link
+              data-testid="posts-link"
+              to='/post'
+            >
+              Post
+            </Link>
+            <Link
+              data-testid="search-link"
+              to='.'
+              search={{param1: 'value1'}}
+            >
+              Search
+            </Link>
+            <Link
+              data-testid="search2-link"
+              to='/post'
+              search={{param1: 'value2'}}
+            >
+              Search2
+            </Link>
             <Outlet />
           </>
         )
-      },
-    })
+      }
 
-    const PostsComponent = () => {
-      return (
-        <>
-          <h1 data-testid="posts-index-heading">Posts</h1>
-          <Link
-            data-testid="first-post-link"
-            to='$postId'
-            params={{ postId: 'id1' }}
-          >
-            To first post
-          </Link>
-          <Link
-            data-testid="second-post-link"
-            to='.'
-            params={{ postId: 'id2' }}
-          >
-            To second post
-          </Link>
-          <Outlet />
-        </>
-      )
-    }
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+        validateSearch: z.object({
+          param1: z.string().optional(),
+        }),
+      })
 
-    const postsRoute = createRoute({
-      getParentRoute: () => layoutRoute,
-      path: 'posts',
-      component: PostsComponent,
-    })
+      const postRoute = createRoute({
+        getParentRoute: () => indexRoute,
+        path: 'post',
+        component: () => <div>Post</div>,
+      })
 
-    const PostComponent = () => {
-      const params = useParams({ strict: false })
-      return (
-        <>
-          <span data-testid={`post-${params.postId}`}>
-            Params: {params.postId}
-          </span>
-        </>
-      )
-    }
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+        history,
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
 
-    const postRoute = createRoute({
-      getParentRoute: () => postsRoute,
-      path: '$postId',
-      component: PostComponent,
-    })
+      render(<RouterProvider router={router} />)
 
-    const router = createRouter({
-      routeTree: rootRoute.addChildren([
-        indexRoute,
-        layoutRoute.addChildren([postsRoute.addChildren([postRoute])]),
-      ]),
-      trailingSlash: trailingSlash ? 'always' : 'never',
-    })
+      const postButton = await screen.findByTestId('posts-link')
 
-    render(<RouterProvider router={router} />)
+      await act(() => fireEvent.click(postButton))
 
-    const postsButton = await screen.findByTestId('posts-link')
+      expect(window.location.pathname).toBe(`/post${tail}`)
 
-    await act(() => fireEvent.click(postsButton))
+      const searchButton = await screen.findByTestId('search-link')
 
-    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts${tail}`)
+      await act(() => fireEvent.click(searchButton))
 
-    const firstPostButton = await screen.findByTestId('first-post-link')
+      expect(router.state.location.pathname).toBe(`/post${tail}`)
+      expect(router.state.location.search).toEqual({ param1: 'value1' })
 
-    await act(() => fireEvent.click(firstPostButton))
+      const searchButton2 = await screen.findByTestId('search2-link')
 
-    expect(await screen.findByTestId('post-id1')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts/id1${tail}`)
+      await act(() => fireEvent.click(searchButton2))
 
-    const secondPostButton = await screen.findByTestId('second-post-link')
+      expect(router.state.location.pathname).toBe(`/post${tail}`)
+      expect(router.state.location.search).toEqual({ param1: 'value2' })
+    },
+  )
 
-    await act(() => fireEvent.click(secondPostButton))
+  test.each([true, false])(
+    'should navigate to current route with changing path params when using "." in nested route structure',
+    async (trailingSlash) => {
+      const tail = trailingSlash ? '/' : ''
+      const rootRoute = createRootRoute()
 
-    // expect(await screen.findByTestId('post-id2')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts/id2${tail}`)
-  },
-)
+      const IndexComponent = () => {
+        return (
+          <>
+            <h1 data-testid="index-heading">Index</h1>
+            <Link
+              data-testid="posts-link"
+              to='/posts'
+            >
+              Posts
+            </Link>
+          </>
+        )
+      }
 
-test.each([true, false])(
-  'should navigate to current route with search params when using "." in nested route structure from Index Route',
-  async (trailingSlash: boolean) => {
-    const tail = trailingSlash ? '/' : ''
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+      })
 
-    const rootRoute = createRootRoute()
+      const layoutRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        id: '_layout',
+        component: () => {
+          return (
+            <>
+              <h1>Layout</h1>
+              <Outlet />
+            </>
+          )
+        },
+      })
 
-    const IndexComponent = () => {
-      return (
-        <>
-          <Link
-            data-testid="posts-link"
-            to='/post'
-          >
-            Post
-          </Link>
-          <Link
-            data-testid="search-link"
-            to='.'
-            search={{param1: 'value1'}}
-          >
-            Search
-          </Link>
-          <Link
-            data-testid="search2-link"
-            to='/post'
-            search={{param1: 'value2'}}
-          >
-            Search2
-          </Link>
-          <Outlet />
-        </>
-      )
-    }
+      const PostsComponent = () => {
+        return (
+          <>
+            <h1 data-testid="posts-index-heading">Posts</h1>
+            <Link
+              data-testid="first-post-link"
+              to='$postId'
+              params={{ postId: 'id1' }}
+            >
+              To first post
+            </Link>
+            <Link
+              data-testid="second-post-link"
+              to='.'
+              params={{ postId: 'id2' }}
+            >
+              To second post
+            </Link>
+            <Outlet />
+          </>
+        )
+      }
 
-    const indexRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: '/',
-      component: IndexComponent,
-      validateSearch: z.object({
-        param1: z.string().optional(),
-      }),
-    })
+      const postsRoute = createRoute({
+        getParentRoute: () => layoutRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
 
-    const postRoute = createRoute({
-      getParentRoute: () => indexRoute,
-      path: 'post',
-      component: () => <div>Post</div>,
-    })
+      const PostComponent = () => {
+        const params = useParams({ strict: false })
+        return (
+          <>
+            <span data-testid={`post-${params.postId}`}>
+              Params: {params.postId}
+            </span>
+          </>
+        )
+      }
 
-    const router = createRouter({
-      routeTree: rootRoute.addChildren([indexRoute, postRoute]),
-      history,
-      trailingSlash: trailingSlash ? 'always' : 'never',
-    })
+      const postRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostComponent,
+      })
 
-    render(<RouterProvider router={router} />)
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([
+          indexRoute,
+          layoutRoute.addChildren([postsRoute.addChildren([postRoute])]),
+        ]),
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
 
-    const postButton = await screen.findByTestId('posts-link')
+      render(<RouterProvider router={router} />)
 
-    await act(() => fireEvent.click(postButton))
+      const postsButton = await screen.findByTestId('posts-link')
 
-    expect(window.location.pathname).toBe(`/post${tail}`)
+      await act(() => fireEvent.click(postsButton))
 
-    const searchButton = await screen.findByTestId('search-link')
+      expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts${tail}`)
 
-    await act(() => fireEvent.click(searchButton))
+      const firstPostButton = await screen.findByTestId('first-post-link')
 
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
-    expect(router.state.location.search).toEqual({ param1: 'value1' })
+      await act(() => fireEvent.click(firstPostButton))
 
-    const searchButton2 = await screen.findByTestId('search2-link')
+      expect(await screen.findByTestId('post-id1')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts/id1${tail}`)
 
-    await act(() => fireEvent.click(searchButton2))
+      const secondPostButton = await screen.findByTestId('second-post-link')
 
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
-    expect(router.state.location.search).toEqual({ param1: 'value2' })
-  },
-)
+      await act(() => fireEvent.click(secondPostButton))
 
-test.each([true, false])(
-  'should navigate to from route when using "." in nested route structure from Index Route',
-  async (trailingSlash: boolean) => {
-    const tail = trailingSlash ? '/' : ''
+      // expect(await screen.findByTestId('post-id2')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts/id2${tail}`)
+    },
+  )
+})
 
-    const rootRoute = createRootRoute()
+describe('relative links to from route', () => {
+  test.each([true, false])(
+    'should navigate to from route when using "." in nested route structure from Index Route',
+    async (trailingSlash: boolean) => {
+      const tail = trailingSlash ? '/' : ''
 
-    const IndexComponent = () => {
-      return (
-        <>
-          <Link
-            data-testid="posts-link"
-            to='/post'
-          >
-            Post
-          </Link>
-          <Link
-            data-testid="search-link"
-            to='.'
-            search={{param1: 'value1'}}
-          >
-            Search
-          </Link>
-          <Link
-            data-testid="home-link"
-            from='/'
-            to='.'
-          >
-            Go To Home
-          </Link>
-          <Outlet />
-        </>
-      )
-    }
+      const rootRoute = createRootRoute()
 
-    const indexRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: '/',
-      component: IndexComponent,
-      validateSearch: z.object({
-        param1: z.string().optional(),
-      }),
-    })
+      const IndexComponent = () => {
+        return (
+          <>
+            <Link
+              data-testid="posts-link"
+              to='/post'
+            >
+              Post
+            </Link>
+            <Link
+              data-testid="search-link"
+              to='.'
+              search={{param1: 'value1'}}
+            >
+              Search
+            </Link>
+            <Link
+              data-testid="home-link"
+              from='/'
+              to='.'
+            >
+              Go To Home
+            </Link>
+            <Outlet />
+          </>
+        )
+      }
 
-    const postRoute = createRoute({
-      getParentRoute: () => indexRoute,
-      path: 'post',
-      component: () => <div>Post</div>,
-    })
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+        validateSearch: z.object({
+          param1: z.string().optional(),
+        }),
+      })
 
-    const router = createRouter({
-      routeTree: rootRoute.addChildren([indexRoute, postRoute]),
-      history,
-      trailingSlash: trailingSlash ? 'always' : 'never',
-    })
+      const postRoute = createRoute({
+        getParentRoute: () => indexRoute,
+        path: 'post',
+        component: () => <div>Post</div>,
+      })
 
-    render(<RouterProvider router={router} />)
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+        history,
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
 
-    const postButton = await screen.findByTestId('posts-link')
+      render(<RouterProvider router={router} />)
 
-    fireEvent.click(postButton)
+      const postButton = await screen.findByTestId('posts-link')
 
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
+      await act(() => fireEvent.click(postButton))
 
-    const searchButton = await screen.findByTestId('search-link')
+      expect(router.state.location.pathname).toBe(`/post${tail}`)
 
-    fireEvent.click(searchButton)
+      const searchButton = await screen.findByTestId('search-link')
 
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
-    expect(router.state.location.search).toEqual({ param1: 'value1' })
+      await act(() => fireEvent.click(searchButton))
 
-    const homeBtn = await screen.findByTestId('home-link')
+      expect(router.state.location.pathname).toBe(`/post${tail}`)
+      expect(router.state.location.search).toEqual({ param1: 'value1' })
 
-    fireEvent.click(homeBtn)
+      const homeBtn = await screen.findByTestId('home-link')
 
-    expect(router.state.location.pathname).toBe(`/`)
-    expect(router.state.location.search).toEqual({})
-  },
-)
+      await act(() => fireEvent.click(homeBtn))
 
-test.each([true, false])(
-  'should navigate to from route with path params when using "." in nested route structure',
-  async (trailingSlash) => {
-    const tail = trailingSlash ? '/' : ''
-    const rootRoute = createRootRoute()
+      expect(router.state.location.pathname).toBe(`/`)
+      expect(router.state.location.search).toEqual({})
+    },
+  )
 
-    const IndexComponent = () => {
-      return (
-        <>
-          <h1 data-testid="index-heading">Index</h1>
-          <Link
-            data-testid="posts-link"
-            to='/posts'
-          >
-            Posts
-          </Link>
-        </>
-      )
-    }
+  test.each([true, false])(
+    'should navigate to from route with path params when using "." in nested route structure',
+    async (trailingSlash) => {
+      const tail = trailingSlash ? '/' : ''
+      const rootRoute = createRootRoute()
 
-    const indexRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: '/',
-      component: IndexComponent,
-    })
+      const IndexComponent = () => {
+        return (
+          <>
+            <h1 data-testid="index-heading">Index</h1>
+            <Link
+              data-testid="posts-link"
+              to='/posts'
+            >
+              Posts
+            </Link>
+          </>
+        )
+      }
 
-    const layoutRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      id: '_layout',
-      component: () => {
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+      })
+
+      const layoutRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        id: '_layout',
+        component: () => {
+          return (
+            <>
+              <h1>Layout</h1>
+              <Outlet />
+            </>
+          )
+        },
+      })
+
+      const PostsComponent = () => {
         return (
           <>
-            <h1>Layout</h1>
+            <h1 data-testid="posts-index-heading">Posts</h1>
+            <Link
+              data-testid="first-post-link"
+              to='$postId'
+              params={{ postId: '1' }}
+            >
+              To first post
+            </Link>
+            <Link
+              data-testid="second-post-link"
+              to='$postId'
+              params={{ postId: '2' }}
+            >
+              To second post
+            </Link>
+            <Link
+              data-testid="to-posts-index-link"
+              from='/posts'
+              to='.'
+            >
+              To posts list
+            </Link>
             <Outlet />
           </>
         )
-      },
-    })
-
-    const PostsComponent = () => {
-      return (
-        <>
-          <h1 data-testid="posts-index-heading">Posts</h1>
-          <Link
-            data-testid="first-post-link"
-            to='$postId'
-            params={{ postId: '1' }}
-          >
-            To first post
-          </Link>
-          <Link
-            data-testid="second-post-link"
-            to='$postId'
-            params={{ postId: '2' }}
-          >
-            To second post
-          </Link>
-          <Link
-            data-testid="to-posts-index-link"
-            from='/posts'
-            to='.'
-          >
-            To posts list
-          </Link>
-          <Outlet />
-        </>
-      )
-    }
+      }
 
-    const PostDetailComponent = () => {
-      const navigate = postDetailRoute.useNavigate()
-      return (
-        <>
-          <h1 data-testid="post-detail-index-heading">Post Detail</h1>
-          <Link
-            data-testid="post-info-link"
-            to='info'
-          >
-            To post info
-          </Link>
-          <Link
-            data-testid="post-notes-link"
-            to='notes'
-          >
-            To post notes
-          </Link>
-          <Link
-            data-testid="to-post-detail-index-link"
-            from='/posts/$postId'
-            to='.'
-          >
-            To index detail options
-          </Link>
-          <Outlet />
-        </>
-      )
-    }
+      const PostDetailComponent = () => {
+        return (
+          <>
+            <h1 data-testid="post-detail-index-heading">Post Detail</h1>
+            <Link
+              data-testid="post-info-link"
+              to='info'
+            >
+              To post info
+            </Link>
+            <Link
+              data-testid="post-notes-link"
+              to='notes'
+            >
+              To post notes
+            </Link>
+            <Link
+              data-testid="to-post-detail-index-link"
+              from='/posts/$postId'
+              to='.'
+            >
+              To index detail options
+            </Link>
+            <Outlet />
+          </>
+        )
+      }
 
-    const PostInfoComponent = () => {
-      return (
-        <>
-          <h1 data-testid="post-info-heading">Post Info</h1>
-        </>
-      )
-    }
+      const PostInfoComponent = () => {
+        return (
+          <>
+            <h1 data-testid="post-info-heading">Post Info</h1>
+          </>
+        )
+      }
 
-    const PostNotesComponent = () => {
-      return (
-        <>
-          <h1 data-testid="post-notes-heading">Post Notes</h1>
-        </>
-      )
-    }
+      const PostNotesComponent = () => {
+        return (
+          <>
+            <h1 data-testid="post-notes-heading">Post Notes</h1>
+          </>
+        )
+      }
 
-    const postsRoute = createRoute({
-      getParentRoute: () => layoutRoute,
-      path: 'posts',
-      component: PostsComponent,
-    })
+      const postsRoute = createRoute({
+        getParentRoute: () => layoutRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
 
-    const postDetailRoute = createRoute({
-      getParentRoute: () => postsRoute,
-      path: '$postId',
-      component: PostDetailComponent,
-    })
+      const postDetailRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostDetailComponent,
+      })
 
-    const postInfoRoute = createRoute({
-      getParentRoute: () => postDetailRoute,
-      path: 'info',
-      component: PostInfoComponent,
-    })
+      const postInfoRoute = createRoute({
+        getParentRoute: () => postDetailRoute,
+        path: 'info',
+        component: PostInfoComponent,
+      })
 
-    const postNotesRoute = createRoute({
-      getParentRoute: () => postDetailRoute,
-      path: 'notes',
-      component: PostNotesComponent,
-    })
+      const postNotesRoute = createRoute({
+        getParentRoute: () => postDetailRoute,
+        path: 'notes',
+        component: PostNotesComponent,
+      })
 
-    const router = createRouter({
-      routeTree: rootRoute.addChildren([
-        indexRoute,
-        layoutRoute.addChildren([postsRoute.addChildren([postDetailRoute.addChildren([postInfoRoute, postNotesRoute])])]),
-      ]),
-      trailingSlash: trailingSlash ? 'always' : 'never',
-    })
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([
+          indexRoute,
+          layoutRoute.addChildren([postsRoute.addChildren([postDetailRoute.addChildren([postInfoRoute, postNotesRoute])])]),
+        ]),
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
 
-    render(<RouterProvider router={router} />)
+      render(<RouterProvider router={router} />)
 
-    const postsButton = await screen.findByTestId('posts-link')
+      const postsButton = await screen.findByTestId('posts-link')
 
-    fireEvent.click(postsButton)
+      fireEvent.click(postsButton)
 
-    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts${tail}`)
+      expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts${tail}`)
 
-    const firstPostButton = await screen.findByTestId('first-post-link')
+      const firstPostButton = await screen.findByTestId('first-post-link')
 
-    fireEvent.click(firstPostButton)
+      fireEvent.click(firstPostButton)
 
-    expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+      expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts/1${tail}`)
 
-    const postInfoButton = await screen.findByTestId('post-info-link')
+      const postInfoButton = await screen.findByTestId('post-info-link')
 
-    fireEvent.click(postInfoButton)
+      fireEvent.click(postInfoButton)
 
-    expect(await screen.findByTestId('post-info-heading')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
+      expect(await screen.findByTestId('post-info-heading')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
 
-    const toPostDetailIndexButton = await screen.findByTestId('to-post-detail-index-link')
+      const toPostDetailIndexButton = await screen.findByTestId('to-post-detail-index-link')
 
-    fireEvent.click(toPostDetailIndexButton)
+      fireEvent.click(toPostDetailIndexButton)
 
-    expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
-    expect(
-      screen.queryByTestId("'post-info-heading"),
-    ).not.toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+      expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+      expect(
+        screen.queryByTestId("'post-info-heading"),
+      ).not.toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts/1${tail}`)
 
-    const postNotesButton = await screen.findByTestId('post-notes-link')
+      const postNotesButton = await screen.findByTestId('post-notes-link')
 
-    fireEvent.click(postNotesButton)
+      fireEvent.click(postNotesButton)
 
-    expect(await screen.findByTestId('post-notes-heading')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
+      expect(await screen.findByTestId('post-notes-heading')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
 
-    const toPostsIndexButton = await screen.findByTestId('to-posts-index-link')
+      const toPostsIndexButton = await screen.findByTestId('to-posts-index-link')
 
-    fireEvent.click(toPostsIndexButton)
+      fireEvent.click(toPostsIndexButton)
 
-    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
-    expect(
-      screen.queryByTestId("'post-notes-heading"),
-    ).not.toBeInTheDocument()
-    expect(
-      screen.queryByTestId("'post-detail-index-heading"),
-    ).not.toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts${tail}`)
+      expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+      expect(
+        screen.queryByTestId("'post-notes-heading"),
+      ).not.toBeInTheDocument()
+      expect(
+        screen.queryByTestId("'post-detail-index-heading"),
+      ).not.toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts${tail}`)
 
-    const secondPostButton = await screen.findByTestId('second-post-link')
+      const secondPostButton = await screen.findByTestId('second-post-link')
 
-    fireEvent.click(secondPostButton)
+      fireEvent.click(secondPostButton)
 
-    expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts/2${tail}`)
-  },
-)
+      expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts/2${tail}`)
+    },
+  )
+})
 
 describe('when on /posts/$postId and navigating to ../ with default `from` /posts', () => {
   async function runTest(navigateVia: 'Route' | 'RouteApi') {
diff --git a/packages/react-router/tests/useNavigate.test.tsx b/packages/react-router/tests/useNavigate.test.tsx
index 07b84d694fe..275f2a8e287 100644
--- a/packages/react-router/tests/useNavigate.test.tsx
+++ b/packages/react-router/tests/useNavigate.test.tsx
@@ -1058,13 +1058,13 @@ test('when navigating from /invoices to ./invoiceId and the current route is /po
     name: 'To first post',
   })
 
-  fireEvent.click(postsButton)
+  await act(() => fireEvent.click(postsButton))
 
   const invoicesButton = await screen.findByRole('button', {
     name: 'To Invoices',
   })
 
-  fireEvent.click(invoicesButton)
+  await act(() => fireEvent.click(invoicesButton))
 
   expect(consoleWarn).toHaveBeenCalledWith(
     'Could not find match for from: /invoices',
@@ -1443,20 +1443,20 @@ test.each([true, false])(
 
     const postButton = await screen.findByTestId('posts-btn')
 
-    fireEvent.click(postButton)
+    await act(() => fireEvent.click(postButton))
 
     expect(router.state.location.pathname).toBe(`/post${tail}`)
 
     const searchButton = await screen.findByTestId('search-btn')
 
-    fireEvent.click(searchButton)
+    await act(() => fireEvent.click(searchButton))
 
     expect(router.state.location.pathname).toBe(`/post${tail}`)
     expect(router.state.location.search).toEqual({ param1: 'value1' })
 
     const searchButton2 = await screen.findByTestId('search2-btn')
 
-    fireEvent.click(searchButton2)
+    await act(() => fireEvent.click(searchButton2))
 
     expect(router.state.location.pathname).toBe(`/post${tail}`)
     expect(router.state.location.search).toEqual({ param1: 'value2' })
@@ -1737,13 +1737,14 @@ test.each([true, false])(
 
     const postsButton = await screen.findByTestId('posts-btn')
 
-    fireEvent.click(postsButton)
+    await act(() => fireEvent.click(postsButton))
 
     expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
 
     const post1Button = await screen.findByTestId('first-post-btn')
 
-    fireEvent.click(post1Button)
+    await act(() => fireEvent.click(post1Button))
+
     expect(await screen.findByTestId('post-heading')).toBeInTheDocument()
     expect(await screen.findByTestId('detail-heading-1')).toBeInTheDocument()
     expect(await screen.findByTestId('detail-heading-2')).toBeInTheDocument()
@@ -1756,124 +1757,27 @@ test.each([true, false])(
 
     const detail1AddBtn = await screen.findByTestId('detail-btn-add-1')
 
-    fireEvent.click(detail1AddBtn)
+    await act(() => fireEvent.click(detail1AddBtn))
 
     expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
     expect(router.state.location.search).toEqual({ _test: true })
 
     const detail1RemoveBtn = await screen.findByTestId('detail-btn-remove-1')
 
-    fireEvent.click(detail1RemoveBtn)
+    await act(() => fireEvent.click(detail1RemoveBtn))
 
     expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
     expect(router.state.location.search).toEqual({})
 
     const detail2AddBtn = await screen.findByTestId('detail-btn-add-2')
 
-    fireEvent.click(detail2AddBtn)
+    await act(() => fireEvent.click(detail2AddBtn))
 
     expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
     expect(router.state.location.search).toEqual({ _test: true })
   },
 )
 
-test.each([true, false])(
-  'should navigate to current route with search params when using "." in nested route structure from Index Route',
-  async (trailingSlash: boolean) => {
-    const tail = trailingSlash ? '/' : ''
-
-    const rootRoute = createRootRoute()
-
-    const IndexComponent = () => {
-      const navigate = useNavigate()
-      return (
-        <>
-          <button
-            data-testid="posts-btn"
-            onClick={() => {
-              navigate({
-                to: '/post',
-              })
-            }}
-          >
-            Post
-          </button>
-          <button
-            data-testid="search-btn"
-            onClick={() =>
-              navigate({
-                to: '.',
-                search: {
-                  param1: 'value1',
-                },
-              })
-            }
-          >
-            Search
-          </button>
-          <button
-            data-testid="search2-btn"
-            onClick={() =>
-              navigate({
-                to: '/post',
-                search: {
-                  param1: 'value2',
-                },
-              })
-            }
-          >
-            Search2
-          </button>
-          <Outlet />
-        </>
-      )
-    }
-
-    const indexRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: '/',
-      component: IndexComponent,
-      validateSearch: z.object({
-        param1: z.string().optional(),
-      }),
-    })
-
-    const postRoute = createRoute({
-      getParentRoute: () => indexRoute,
-      path: 'post',
-      component: () => <div>Post</div>,
-    })
-
-    const router = createRouter({
-      routeTree: rootRoute.addChildren([indexRoute, postRoute]),
-      history,
-      trailingSlash: trailingSlash ? 'always' : 'never',
-    })
-
-    render(<RouterProvider router={router} />)
-
-    const postButton = await screen.findByTestId('posts-btn')
-
-    fireEvent.click(postButton)
-
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
-
-    const searchButton = await screen.findByTestId('search-btn')
-
-    fireEvent.click(searchButton)
-
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
-    expect(router.state.location.search).toEqual({ param1: 'value1' })
-
-    const searchButton2 = await screen.findByTestId('search2-btn')
-
-    fireEvent.click(searchButton2)
-
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
-    expect(router.state.location.search).toEqual({ param1: 'value2' })
-  },
-)
-
 test.each([true, false])(
   'should navigate to from route when using "." in nested route structure from Index Route',
   async (trailingSlash: boolean) => {
@@ -1949,20 +1853,20 @@ test.each([true, false])(
 
     const postButton = await screen.findByTestId('posts-btn')
 
-    fireEvent.click(postButton)
+    await act(() => fireEvent.click(postButton))
 
     expect(router.state.location.pathname).toBe(`/post${tail}`)
 
     const searchButton = await screen.findByTestId('search-btn')
 
-    fireEvent.click(searchButton)
+    await act(() => fireEvent.click(searchButton))
 
     expect(router.state.location.pathname).toBe(`/post${tail}`)
     expect(router.state.location.search).toEqual({ param1: 'value1' })
 
     const homeBtn = await screen.findByTestId('home-btn')
 
-    fireEvent.click(homeBtn)
+    await act(() => fireEvent.click(homeBtn))
 
     expect(router.state.location.pathname).toBe(`/`)
     expect(router.state.location.search).toEqual({})
@@ -2402,7 +2306,7 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param Route</h1>
-              <button onClick={() => navigate({ from: 'param/$param', to: './a' })}>
+              <button onClick={() => navigate({ from: paramRoute.fullPath, to: './a' })}>
                 Link to ./a
               </button>
               <button
@@ -2424,7 +2328,7 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param A Route</h1>
-              <button onClick={() => navigate({ from: 'param/$param/a', to: '..' })}>
+              <button onClick={() => navigate({ from: paramARoute.fullPath, to: '..' })}>
                 Link to .. from /param/foo/a
               </button>
               <Outlet />

From f54d35a80d0b7dbaaf95b4d218712a561242b81e Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Sun, 17 Aug 2025 14:22:02 +0200
Subject: [PATCH 05/34] code cleanup

---
 packages/react-router/src/link.tsx | 24 ++++-----
 packages/router-core/src/router.ts | 84 +++++++++++++-----------------
 2 files changed, 45 insertions(+), 63 deletions(-)

diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index 6cff0932e2a..0c33cbd46d4 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -245,19 +245,6 @@ export function useLinkProps<
     }
   }, [disabled, doPreload, preload])
 
-  const navigate = React.useCallback(() => {
-    router.navigate({
-      ...options,
-      from: getFrom(),
-      replace,
-      resetScroll,
-      hashScrollIntoView,
-      startTransition,
-      viewTransition,
-      ignoreBlocker,
-    })
-  }, [router, options, getFrom, replace, resetScroll, hashScrollIntoView, startTransition, viewTransition, ignoreBlocker])
-
   // The click handler
   const handleClick = (e: React.MouseEvent) => {
     if (
@@ -280,7 +267,16 @@ export function useLinkProps<
 
       // All is well? Navigate!
       // N.B. we don't call `router.commitLocation(next) here because we want to run `validateSearch` before committing
-      navigate()
+      router.navigate({
+        ...options,
+        from: getFrom(),
+        replace,
+        resetScroll,
+        hashScrollIntoView,
+        startTransition,
+        viewTransition,
+        ignoreBlocker,
+      })
     }
   }
 
diff --git a/packages/router-core/src/router.ts b/packages/router-core/src/router.ts
index 23d24377e5e..da5c1c091b6 100644
--- a/packages/router-core/src/router.ts
+++ b/packages/router-core/src/router.ts
@@ -8,7 +8,6 @@ import invariant from 'tiny-invariant'
 import {
   createControlledPromise,
   deepEqual,
-  findLast,
   functionalUpdate,
   last,
   replaceEqualDeep,
@@ -1488,60 +1487,46 @@ export class RouterCore<
         _buildLocation: true,
       })
 
-      const lastMatch = last(allCurrentLocationMatches)!
-
-      // First let's find the starting pathname
-      // By default, start with the current location
-      let fromPath = this.resolvePathWithBase(lastMatch.fullPath, '.')
-      const destFromPath = dest.from && this.resolvePathWithBase(dest.from, '.')
-
-      const toPath = destFromPath
-          ? this.resolvePathWithBase(destFromPath, `${dest.to ?? "."}`)
-          : this.resolvePathWithBase(fromPath, `${dest.to ?? "."}`)
-
-      const routeIsChanging =
-        !!dest.to &&
-        (
-          comparePaths(destFromPath ?? fromPath, fromPath) ?
-          (
-            !comparePaths(toPath, fromPath)
-          ) :
-          (
-            !comparePaths(toPath, destFromPath!) ||
-            !comparePaths(toPath, fromPath)
-          )
-        )
-
-      // If the route is changing we need to find the relative fromPath
-      if (dest.unsafeRelative === 'path') {
-        fromPath = currentLocation.pathname
-      } else if (routeIsChanging && dest.from) {
-        fromPath = dest.from
-
-        // do this check only on navigations during test or development
-        if (process.env.NODE_ENV !== 'production' && dest._isNavigate) {
-          const allFromMatches = this.getMatchedRoutes(
-            dest.from,
-            undefined,
-          ).matchedRoutes
-
-          const matchedFrom = findLast(allCurrentLocationMatches, (d) => {
-            return comparePaths(d.fullPath, fromPath)
+      // check that from path exists in the current route tree
+      // do this check only on navigations during test or development
+      if (
+        dest.from &&
+        process.env.NODE_ENV !== 'production' &&
+        dest._isNavigate
+      ) {
+        const allFromMatches = this.getMatchedRoutes(
+          dest.from,
+          undefined,
+        ).matchedRoutes
+
+        const matchedFrom = [...allCurrentLocationMatches]
+          .reverse()
+          .find((d) => {
+            return comparePaths(d.fullPath, dest.from!)
           })
 
-          const matchedCurrent = findLast(allFromMatches, (d) => {
-            return comparePaths(d.fullPath, currentLocation.pathname)
-          })
+        const matchedCurrent = [...allFromMatches].reverse().find((d) => {
+          return comparePaths(d.fullPath, currentLocation.pathname)
+        })
 
-          // for from to be invalid it shouldn't just be unmatched to currentLocation
-          // but the currentLocation should also be unmatched to from
-          if (!matchedFrom && !matchedCurrent) {
-            console.warn(`Could not find match for from: ${fromPath}`)
-          }
+        // for from to be invalid it shouldn't just be unmatched to currentLocation
+        // but the currentLocation should also be unmatched to from
+        if (!matchedFrom && !matchedCurrent) {
+          console.warn(`Could not find match for from: ${dest.from}`)
         }
       }
 
-      fromPath = this.resolvePathWithBase(fromPath, '.')
+      // Now let's find the starting pathname
+      // This should default to the current location if no from is provided
+      const lastMatch = last(allCurrentLocationMatches)!
+
+      const defaultedFromPath =
+        dest.unsafeRelative === 'path'
+          ? currentLocation.pathname
+          : (dest.from ?? lastMatch.fullPath)
+
+      // ensure this includes the basePath if set
+      const fromPath = this.resolvePathWithBase(defaultedFromPath, '.')
 
       // From search should always use the current location
       const fromSearch = lastMatch.search
@@ -1549,6 +1534,7 @@ export class RouterCore<
       const fromParams = { ...lastMatch.params }
 
       // Resolve the next to
+      // ensure this includes the basePath if set
       const nextTo = dest.to
         ? this.resolvePathWithBase(fromPath, `${dest.to}`)
         : this.resolvePathWithBase(fromPath, '.')

From e69b39388d204fa194b2c6ad354eb78767734c1f Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Sun, 17 Aug 2025 14:27:36 +0200
Subject: [PATCH 06/34] test cleanup

---
 packages/react-router/tests/link.test.tsx     |   10 +-
 .../react-router/tests/useNavigate.test.tsx   | 1474 +++++++++--------
 2 files changed, 744 insertions(+), 740 deletions(-)

diff --git a/packages/react-router/tests/link.test.tsx b/packages/react-router/tests/link.test.tsx
index 14a07f3e7af..90c884cfdf2 100644
--- a/packages/react-router/tests/link.test.tsx
+++ b/packages/react-router/tests/link.test.tsx
@@ -5411,7 +5411,7 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
 
 describe('relative links to current route', () => {
   test.each([true, false])(
-    'should navigate to current route when using "." in nested route structure from Index Route',
+    'should navigate to current route when using "." in nested route structure from Index Route with trailingSlash: %s',
     async (trailingSlash: boolean) => {
       const tail = trailingSlash ? '/' : ''
 
@@ -5493,7 +5493,7 @@ describe('relative links to current route', () => {
   )
 
   test.each([true, false])(
-    'should navigate to current route with search params when using "." in nested route structure from Index Route',
+    'should navigate to current route with search params when using "." in nested route structure from Index Route with trailingSlash: %s',
     async (trailingSlash: boolean) => {
       const tail = trailingSlash ? '/' : ''
 
@@ -5573,7 +5573,7 @@ describe('relative links to current route', () => {
   )
 
   test.each([true, false])(
-    'should navigate to current route with changing path params when using "." in nested route structure',
+    'should navigate to current route with changing path params when using "." in nested route structure with trailingSlash: %s',
     async (trailingSlash) => {
       const tail = trailingSlash ? '/' : ''
       const rootRoute = createRootRoute()
@@ -5693,7 +5693,7 @@ describe('relative links to current route', () => {
 
 describe('relative links to from route', () => {
   test.each([true, false])(
-    'should navigate to from route when using "." in nested route structure from Index Route',
+    'should navigate to from route when using "." in nested route structure from Index Route with trailingSlash: %s',
     async (trailingSlash: boolean) => {
       const tail = trailingSlash ? '/' : ''
 
@@ -5773,7 +5773,7 @@ describe('relative links to from route', () => {
   )
 
   test.each([true, false])(
-    'should navigate to from route with path params when using "." in nested route structure',
+    'should navigate to from route with path params when using "." in nested route structure with trailingSlash: %s',
     async (trailingSlash) => {
       const tail = trailingSlash ? '/' : ''
       const rootRoute = createRootRoute()
diff --git a/packages/react-router/tests/useNavigate.test.tsx b/packages/react-router/tests/useNavigate.test.tsx
index 275f2a8e287..51fe8d28ede 100644
--- a/packages/react-router/tests/useNavigate.test.tsx
+++ b/packages/react-router/tests/useNavigate.test.tsx
@@ -1366,895 +1366,899 @@ test('<Navigate> navigates only once in <StrictMode>', async () => {
   expect(navigateSpy.mock.calls.length).toBe(1)
 })
 
-test.each([true, false])(
-  'should navigate to current route with search params when using "." in nested route structure from Index Route',
-  async (trailingSlash: boolean) => {
-    const tail = trailingSlash ? '/' : ''
+describe('relative navigate to current route', () => {
+  test.each([true, false])(
+    'should navigate to current route with search params when using "." in nested route structure from Index Route with trailingSlash: %s',
+    async (trailingSlash: boolean) => {
+      const tail = trailingSlash ? '/' : ''
 
-    const rootRoute = createRootRoute()
+      const rootRoute = createRootRoute()
 
-    const IndexComponent = () => {
-      const navigate = useNavigate()
-      return (
-        <>
-          <button
-            data-testid="posts-btn"
-            onClick={() => {
-              navigate({
-                to: '/post',
-              })
-            }}
-          >
-            Post
-          </button>
-          <button
-            data-testid="search-btn"
-            onClick={() =>
-              navigate({
-                to: '.',
-                search: {
-                  param1: 'value1',
-                },
-              })
-            }
-          >
-            Search
-          </button>
-          <button
-            data-testid="search2-btn"
-            onClick={() =>
-              navigate({
-                to: '/post',
-                search: {
-                  param1: 'value2',
-                },
-              })
-            }
-          >
-            Search2
-          </button>
-          <Outlet />
-        </>
-      )
-    }
+      const IndexComponent = () => {
+        const navigate = useNavigate()
+        return (
+          <>
+            <button
+              data-testid="posts-btn"
+              onClick={() => {
+                navigate({
+                  to: '/post',
+                })
+              }}
+            >
+              Post
+            </button>
+            <button
+              data-testid="search-btn"
+              onClick={() =>
+                navigate({
+                  to: '.',
+                  search: {
+                    param1: 'value1',
+                  },
+                })
+              }
+            >
+              Search
+            </button>
+            <button
+              data-testid="search2-btn"
+              onClick={() =>
+                navigate({
+                  to: '/post',
+                  search: {
+                    param1: 'value2',
+                  },
+                })
+              }
+            >
+              Search2
+            </button>
+            <Outlet />
+          </>
+        )
+      }
 
-    const indexRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: '/',
-      component: IndexComponent,
-      validateSearch: z.object({
-        param1: z.string().optional(),
-      }),
-    })
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+        validateSearch: z.object({
+          param1: z.string().optional(),
+        }),
+      })
 
-    const postRoute = createRoute({
-      getParentRoute: () => indexRoute,
-      path: 'post',
-      component: () => <div>Post</div>,
-    })
+      const postRoute = createRoute({
+        getParentRoute: () => indexRoute,
+        path: 'post',
+        component: () => <div>Post</div>,
+      })
 
-    const router = createRouter({
-      routeTree: rootRoute.addChildren([indexRoute, postRoute]),
-      history,
-      trailingSlash: trailingSlash ? 'always' : 'never',
-    })
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+        history,
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
 
-    render(<RouterProvider router={router} />)
+      render(<RouterProvider router={router} />)
 
-    const postButton = await screen.findByTestId('posts-btn')
+      const postButton = await screen.findByTestId('posts-btn')
 
-    await act(() => fireEvent.click(postButton))
+      await act(() => fireEvent.click(postButton))
 
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
+      expect(router.state.location.pathname).toBe(`/post${tail}`)
 
-    const searchButton = await screen.findByTestId('search-btn')
+      const searchButton = await screen.findByTestId('search-btn')
 
-    await act(() => fireEvent.click(searchButton))
+      await act(() => fireEvent.click(searchButton))
 
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
-    expect(router.state.location.search).toEqual({ param1: 'value1' })
+      expect(router.state.location.pathname).toBe(`/post${tail}`)
+      expect(router.state.location.search).toEqual({ param1: 'value1' })
 
-    const searchButton2 = await screen.findByTestId('search2-btn')
+      const searchButton2 = await screen.findByTestId('search2-btn')
 
-    await act(() => fireEvent.click(searchButton2))
+      await act(() => fireEvent.click(searchButton2))
 
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
-    expect(router.state.location.search).toEqual({ param1: 'value2' })
-  },
-)
+      expect(router.state.location.pathname).toBe(`/post${tail}`)
+      expect(router.state.location.search).toEqual({ param1: 'value2' })
+    },
+  )
 
-test.each([true, false])(
-  'should navigate to current route with changing path params when using "." in nested route structure',
-  async (trailingSlash) => {
-    const tail = trailingSlash ? '/' : ''
-    const rootRoute = createRootRoute()
+  test.each([true, false])(
+    'should navigate to current route with changing path params when using "." in nested route structure with trailingSlash: %s',
+    async (trailingSlash) => {
+      const tail = trailingSlash ? '/' : ''
+      const rootRoute = createRootRoute()
 
-    const IndexComponent = () => {
-      const navigate = useNavigate()
-      return (
-        <>
-          <h1 data-testid="index-heading">Index</h1>
-          <button
-            data-testid="posts-btn"
-            onClick={() => navigate({ to: '/posts' })}
-          >
-            Posts
-          </button>
-        </>
-      )
-    }
+      const IndexComponent = () => {
+        const navigate = useNavigate()
+        return (
+          <>
+            <h1 data-testid="index-heading">Index</h1>
+            <button
+              data-testid="posts-btn"
+              onClick={() => navigate({ to: '/posts' })}
+            >
+              Posts
+            </button>
+          </>
+        )
+      }
 
-    const indexRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: '/',
-      component: IndexComponent,
-    })
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+      })
+
+      const layoutRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        id: '_layout',
+        component: () => {
+          return (
+            <>
+              <h1>Layout</h1>
+              <Outlet />
+            </>
+          )
+        },
+      })
+
+      const PostsComponent = () => {
+        const navigate = useNavigate()
 
-    const layoutRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      id: '_layout',
-      component: () => {
         return (
           <>
-            <h1>Layout</h1>
+            <h1 data-testid="posts-index-heading">Posts</h1>
+            <button
+              data-testid="first-post-btn"
+              onClick={() =>
+                navigate({
+                  to: '$postId',
+                  params: { postId: 'id1' },
+                })
+              }
+            >
+              To first post
+            </button>
+            <button
+              data-testid="second-post-btn"
+              onClick={() =>
+                navigate({
+                  to: '.',
+                  params: { postId: 'id2' },
+                })
+              }
+            >
+              To second post
+            </button>
             <Outlet />
           </>
         )
-      },
-    })
-
-    const PostsComponent = () => {
-      const navigate = useNavigate()
+      }
 
-      return (
-        <>
-          <h1 data-testid="posts-index-heading">Posts</h1>
-          <button
-            data-testid="first-post-btn"
-            onClick={() =>
-              navigate({
-                to: '$postId',
-                params: { postId: 'id1' },
-              })
-            }
-          >
-            To first post
-          </button>
-          <button
-            data-testid="second-post-btn"
-            onClick={() =>
-              navigate({
-                to: '.',
-                params: { postId: 'id2' },
-              })
-            }
-          >
-            To second post
-          </button>
-          <Outlet />
-        </>
-      )
-    }
+      const postsRoute = createRoute({
+        getParentRoute: () => layoutRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
 
-    const postsRoute = createRoute({
-      getParentRoute: () => layoutRoute,
-      path: 'posts',
-      component: PostsComponent,
-    })
+      const PostComponent = () => {
+        const params = useParams({ strict: false })
+        return (
+          <>
+            <span data-testid={`post-${params.postId}`}>
+              Params: {params.postId}
+            </span>
+          </>
+        )
+      }
 
-    const PostComponent = () => {
-      const params = useParams({ strict: false })
-      return (
-        <>
-          <span data-testid={`post-${params.postId}`}>
-            Params: {params.postId}
-          </span>
-        </>
-      )
-    }
+      const postRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostComponent,
+      })
 
-    const postRoute = createRoute({
-      getParentRoute: () => postsRoute,
-      path: '$postId',
-      component: PostComponent,
-    })
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([
+          indexRoute,
+          layoutRoute.addChildren([postsRoute.addChildren([postRoute])]),
+        ]),
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
 
-    const router = createRouter({
-      routeTree: rootRoute.addChildren([
-        indexRoute,
-        layoutRoute.addChildren([postsRoute.addChildren([postRoute])]),
-      ]),
-      trailingSlash: trailingSlash ? 'always' : 'never',
-    })
+      render(<RouterProvider router={router} />)
 
-    render(<RouterProvider router={router} />)
+      const postsButton = await screen.findByTestId('posts-btn')
 
-    const postsButton = await screen.findByTestId('posts-btn')
+      fireEvent.click(postsButton)
 
-    fireEvent.click(postsButton)
+      expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts${tail}`)
 
-    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts${tail}`)
+      const firstPostButton = await screen.findByTestId('first-post-btn')
 
-    const firstPostButton = await screen.findByTestId('first-post-btn')
+      fireEvent.click(firstPostButton)
 
-    fireEvent.click(firstPostButton)
+      expect(await screen.findByTestId('post-id1')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts/id1${tail}`)
 
-    expect(await screen.findByTestId('post-id1')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts/id1${tail}`)
+      const secondPostButton = await screen.findByTestId('second-post-btn')
 
-    const secondPostButton = await screen.findByTestId('second-post-btn')
+      fireEvent.click(secondPostButton)
 
-    fireEvent.click(secondPostButton)
+      expect(await screen.findByTestId('post-id2')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts/id2${tail}`)
+    },
+  )
 
-    expect(await screen.findByTestId('post-id2')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts/id2${tail}`)
-  },
-)
+  test.each([true, false])(
+    'should navigate to current route with search params when using "." in nested route structure from non-Index Route with trailingSlash: %s',
+    async (trailingSlash) => {
+      const tail = trailingSlash ? '/' : ''
+      const rootRoute = createRootRoute()
 
-test.each([true, false])(
-  'should navigate to current route with search params when using "." in nested route structure from non-Index Route',
-  async (trailingSlash) => {
-    const tail = trailingSlash ? '/' : ''
-    const rootRoute = createRootRoute()
+      const IndexComponent = () => {
+        const navigate = useNavigate()
+        return (
+          <>
+            <h1 data-testid="index-heading">Index</h1>
+            <button
+              data-testid="posts-btn"
+              onClick={() => navigate({ to: '/posts', params: { lang: '1' } })}
+            >
+              Posts
+            </button>
+          </>
+        )
+      }
 
-    const IndexComponent = () => {
-      const navigate = useNavigate()
-      return (
-        <>
-          <h1 data-testid="index-heading">Index</h1>
-          <button
-            data-testid="posts-btn"
-            onClick={() => navigate({ to: '/posts', params: { lang: '1' } })}
-          >
-            Posts
-          </button>
-        </>
-      )
-    }
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+      })
 
-    const indexRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: '/',
-      component: IndexComponent,
-    })
+      const PostsComponent = () => {
+        const navigate = postsRoute.useNavigate()
+        return (
+          <>
+            <h1 data-testid="posts-index-heading">Posts</h1>
+            <button
+              data-testid="first-post-btn"
+              onClick={() =>
+                navigate({
+                  to: '$postId/detail',
+                  params: { postId: 'id1' },
+                })
+              }
+            >
+              To first post
+            </button>
+            <Outlet />
+          </>
+        )
+      }
 
-    const PostsComponent = () => {
-      const navigate = postsRoute.useNavigate()
-      return (
-        <>
-          <h1 data-testid="posts-index-heading">Posts</h1>
-          <button
-            data-testid="first-post-btn"
-            onClick={() =>
-              navigate({
-                to: '$postId/detail',
-                params: { postId: 'id1' },
-              })
-            }
-          >
-            To first post
-          </button>
-          <Outlet />
-        </>
-      )
-    }
+      const postsRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
 
-    const postsRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: 'posts',
-      component: PostsComponent,
-    })
+      const useModal = (name: string) => {
+        const currentOpen = postRoute.useSearch({
+          select: (search) => search[`_${name}`],
+        })
 
-    const useModal = (name: string) => {
-      const currentOpen = postRoute.useSearch({
-        select: (search) => search[`_${name}`],
-      })
+        const navigate = useNavigate()
 
-      const navigate = useNavigate()
-
-      const setModal = React.useCallback(
-        (open: boolean) => {
-          navigate({
-            to: '.',
-            search: (prev: {}) => ({
-              ...prev,
-              [`_${name}`]: open ? true : undefined,
-            }),
-            resetScroll: false,
-          })
-        },
-        [name, navigate],
-      )
+        const setModal = React.useCallback(
+          (open: boolean) => {
+            navigate({
+              to: '.',
+              search: (prev: {}) => ({
+                ...prev,
+                [`_${name}`]: open ? true : undefined,
+              }),
+              resetScroll: false,
+            })
+          },
+          [name, navigate],
+        )
 
-      return [currentOpen, setModal] as const
-    }
+        return [currentOpen, setModal] as const
+      }
 
-    function DetailComponent(props: { id: string }) {
-      const params = useParams({ strict: false })
-      const [currentTest, setTest] = useModal('test')
+      function DetailComponent(props: { id: string }) {
+        const params = useParams({ strict: false })
+        const [currentTest, setTest] = useModal('test')
 
-      return (
-        <>
-          <div data-testid={`detail-heading-${props.id}`}>
-            Post Path "/{params.postId}/detail-{props.id}"!
-          </div>
-          {currentTest ? (
-            <button
-              data-testid={`detail-btn-remove-${props.id}`}
-              onClick={() => setTest(false)}
-            >
-              Remove test
-            </button>
-          ) : (
-            <button
-              data-testid={`detail-btn-add-${props.id}`}
-              onClick={() => setTest(true)}
-            >
-              Add test
-            </button>
-          )}
-        </>
-      )
-    }
+        return (
+          <>
+            <div data-testid={`detail-heading-${props.id}`}>
+              Post Path "/{params.postId}/detail-{props.id}"!
+            </div>
+            {currentTest ? (
+              <button
+                data-testid={`detail-btn-remove-${props.id}`}
+                onClick={() => setTest(false)}
+              >
+                Remove test
+              </button>
+            ) : (
+              <button
+                data-testid={`detail-btn-add-${props.id}`}
+                onClick={() => setTest(true)}
+              >
+                Add test
+              </button>
+            )}
+          </>
+        )
+      }
 
-    const PostComponent = () => {
-      const params = useParams({ strict: false })
+      const PostComponent = () => {
+        const params = useParams({ strict: false })
 
-      return (
-        <div>
-          <div data-testid="post-heading">Post "{params.postId}"!</div>
-          <DetailComponent id={'1'} />
-          <Outlet />
-        </div>
-      )
-    }
+        return (
+          <div>
+            <div data-testid="post-heading">Post "{params.postId}"!</div>
+            <DetailComponent id={'1'} />
+            <Outlet />
+          </div>
+        )
+      }
+
+      const postRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostComponent,
+        validateSearch: z.object({
+          _test: z.boolean().optional(),
+        }),
+      })
 
-    const postRoute = createRoute({
-      getParentRoute: () => postsRoute,
-      path: '$postId',
-      component: PostComponent,
-      validateSearch: z.object({
-        _test: z.boolean().optional(),
-      }),
-    })
+      const detailRoute = createRoute({
+        getParentRoute: () => postRoute,
+        path: 'detail',
+        component: () => <DetailComponent id={'2'} />,
+      })
 
-    const detailRoute = createRoute({
-      getParentRoute: () => postRoute,
-      path: 'detail',
-      component: () => <DetailComponent id={'2'} />,
-    })
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([
+          indexRoute,
+          postsRoute.addChildren([postRoute.addChildren([detailRoute])]),
+        ]),
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
 
-    const router = createRouter({
-      routeTree: rootRoute.addChildren([
-        indexRoute,
-        postsRoute.addChildren([postRoute.addChildren([detailRoute])]),
-      ]),
-      trailingSlash: trailingSlash ? 'always' : 'never',
-    })
+      render(<RouterProvider router={router} />)
 
-    render(<RouterProvider router={router} />)
+      const postsButton = await screen.findByTestId('posts-btn')
 
-    const postsButton = await screen.findByTestId('posts-btn')
+      await act(() => fireEvent.click(postsButton))
 
-    await act(() => fireEvent.click(postsButton))
+      expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
 
-    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+      const post1Button = await screen.findByTestId('first-post-btn')
 
-    const post1Button = await screen.findByTestId('first-post-btn')
+      await act(() => fireEvent.click(post1Button))
 
-    await act(() => fireEvent.click(post1Button))
+      expect(await screen.findByTestId('post-heading')).toBeInTheDocument()
+      expect(await screen.findByTestId('detail-heading-1')).toBeInTheDocument()
+      expect(await screen.findByTestId('detail-heading-2')).toBeInTheDocument()
+      expect(await screen.findByTestId('detail-heading-1')).toHaveTextContent(
+        'Post Path "/id1/detail-1',
+      )
+      expect(await screen.findByTestId('detail-heading-2')).toHaveTextContent(
+        'Post Path "/id1/detail-2',
+      )
 
-    expect(await screen.findByTestId('post-heading')).toBeInTheDocument()
-    expect(await screen.findByTestId('detail-heading-1')).toBeInTheDocument()
-    expect(await screen.findByTestId('detail-heading-2')).toBeInTheDocument()
-    expect(await screen.findByTestId('detail-heading-1')).toHaveTextContent(
-      'Post Path "/id1/detail-1',
-    )
-    expect(await screen.findByTestId('detail-heading-2')).toHaveTextContent(
-      'Post Path "/id1/detail-2',
-    )
+      const detail1AddBtn = await screen.findByTestId('detail-btn-add-1')
 
-    const detail1AddBtn = await screen.findByTestId('detail-btn-add-1')
+      await act(() => fireEvent.click(detail1AddBtn))
 
-    await act(() => fireEvent.click(detail1AddBtn))
+      expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
+      expect(router.state.location.search).toEqual({ _test: true })
 
-    expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
-    expect(router.state.location.search).toEqual({ _test: true })
+      const detail1RemoveBtn = await screen.findByTestId('detail-btn-remove-1')
 
-    const detail1RemoveBtn = await screen.findByTestId('detail-btn-remove-1')
+      await act(() => fireEvent.click(detail1RemoveBtn))
 
-    await act(() => fireEvent.click(detail1RemoveBtn))
+      expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
+      expect(router.state.location.search).toEqual({})
 
-    expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
-    expect(router.state.location.search).toEqual({})
+      const detail2AddBtn = await screen.findByTestId('detail-btn-add-2')
 
-    const detail2AddBtn = await screen.findByTestId('detail-btn-add-2')
+      await act(() => fireEvent.click(detail2AddBtn))
 
-    await act(() => fireEvent.click(detail2AddBtn))
+      expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
+      expect(router.state.location.search).toEqual({ _test: true })
+    },
+  )
+})
 
-    expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
-    expect(router.state.location.search).toEqual({ _test: true })
-  },
-)
+describe('relative navigate to from route', () => {
+  test.each([true, false])(
+    'should navigate to from route when using "." in nested route structure from Index Route with trailingSlash: %s',
+    async (trailingSlash: boolean) => {
+      const tail = trailingSlash ? '/' : ''
 
-test.each([true, false])(
-  'should navigate to from route when using "." in nested route structure from Index Route',
-  async (trailingSlash: boolean) => {
-    const tail = trailingSlash ? '/' : ''
+      const rootRoute = createRootRoute()
 
-    const rootRoute = createRootRoute()
+      const IndexComponent = () => {
+        const navigate = useNavigate()
+        return (
+          <>
+            <button
+              data-testid="posts-btn"
+              onClick={() => {
+                navigate({
+                  to: '/post',
+                })
+              }}
+            >
+              Post
+            </button>
+            <button
+              data-testid="search-btn"
+              onClick={() =>
+                navigate({
+                  to: '.',
+                  search: {
+                    param1: 'value1',
+                  },
+                })
+              }
+            >
+              Search
+            </button>
+            <button
+              data-testid="home-btn"
+              onClick={() =>
+                navigate({
+                  from: '/',
+                  to: '.'
+                })
+              }
+            >
+              Go To Home
+            </button>
+            <Outlet />
+          </>
+        )
+      }
 
-    const IndexComponent = () => {
-      const navigate = useNavigate()
-      return (
-        <>
-          <button
-            data-testid="posts-btn"
-            onClick={() => {
-              navigate({
-                to: '/post',
-              })
-            }}
-          >
-            Post
-          </button>
-          <button
-            data-testid="search-btn"
-            onClick={() =>
-              navigate({
-                to: '.',
-                search: {
-                  param1: 'value1',
-                },
-              })
-            }
-          >
-            Search
-          </button>
-          <button
-            data-testid="home-btn"
-            onClick={() =>
-              navigate({
-                from: '/',
-                to: '.'
-              })
-            }
-          >
-            Go To Home
-          </button>
-          <Outlet />
-        </>
-      )
-    }
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+        validateSearch: z.object({
+          param1: z.string().optional(),
+        }),
+      })
 
-    const indexRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: '/',
-      component: IndexComponent,
-      validateSearch: z.object({
-        param1: z.string().optional(),
-      }),
-    })
+      const postRoute = createRoute({
+        getParentRoute: () => indexRoute,
+        path: 'post',
+        component: () => <div>Post</div>,
+      })
 
-    const postRoute = createRoute({
-      getParentRoute: () => indexRoute,
-      path: 'post',
-      component: () => <div>Post</div>,
-    })
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+        history,
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
 
-    const router = createRouter({
-      routeTree: rootRoute.addChildren([indexRoute, postRoute]),
-      history,
-      trailingSlash: trailingSlash ? 'always' : 'never',
-    })
+      render(<RouterProvider router={router} />)
 
-    render(<RouterProvider router={router} />)
+      const postButton = await screen.findByTestId('posts-btn')
 
-    const postButton = await screen.findByTestId('posts-btn')
+      await act(() => fireEvent.click(postButton))
 
-    await act(() => fireEvent.click(postButton))
+      expect(router.state.location.pathname).toBe(`/post${tail}`)
 
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
+      const searchButton = await screen.findByTestId('search-btn')
 
-    const searchButton = await screen.findByTestId('search-btn')
+      await act(() => fireEvent.click(searchButton))
 
-    await act(() => fireEvent.click(searchButton))
+      expect(router.state.location.pathname).toBe(`/post${tail}`)
+      expect(router.state.location.search).toEqual({ param1: 'value1' })
 
-    expect(router.state.location.pathname).toBe(`/post${tail}`)
-    expect(router.state.location.search).toEqual({ param1: 'value1' })
+      const homeBtn = await screen.findByTestId('home-btn')
 
-    const homeBtn = await screen.findByTestId('home-btn')
+      await act(() => fireEvent.click(homeBtn))
 
-    await act(() => fireEvent.click(homeBtn))
+      expect(router.state.location.pathname).toBe(`/`)
+      expect(router.state.location.search).toEqual({})
+    },
+  )
 
-    expect(router.state.location.pathname).toBe(`/`)
-    expect(router.state.location.search).toEqual({})
-  },
-)
+  test.each([true, false])(
+    'should navigate to from route with path params when using "." in nested route structure with trailingSlash: %s',
+    async (trailingSlash) => {
+      const tail = trailingSlash ? '/' : ''
+      const rootRoute = createRootRoute()
 
-test.each([true, false])(
-  'should navigate to from route with path params when using "." in nested route structure',
-  async (trailingSlash) => {
-    const tail = trailingSlash ? '/' : ''
-    const rootRoute = createRootRoute()
+      const IndexComponent = () => {
+        const navigate = useNavigate()
+        return (
+          <>
+            <h1 data-testid="index-heading">Index</h1>
+            <button
+              data-testid="posts-btn"
+              onClick={() => navigate({ to: '/posts' })}
+            >
+              Posts
+            </button>
+          </>
+        )
+      }
 
-    const IndexComponent = () => {
-      const navigate = useNavigate()
-      return (
-        <>
-          <h1 data-testid="index-heading">Index</h1>
-          <button
-            data-testid="posts-btn"
-            onClick={() => navigate({ to: '/posts' })}
-          >
-            Posts
-          </button>
-        </>
-      )
-    }
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+      })
 
-    const indexRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: '/',
-      component: IndexComponent,
-    })
+      const layoutRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        id: '_layout',
+        component: () => {
+          return (
+            <>
+              <h1>Layout</h1>
+              <Outlet />
+            </>
+          )
+        },
+      })
 
-    const layoutRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      id: '_layout',
-      component: () => {
+      const PostsComponent = () => {
+        const navigate = postsRoute.useNavigate()
         return (
           <>
-            <h1>Layout</h1>
+            <h1 data-testid="posts-index-heading">Posts</h1>
+            <button
+              data-testid="first-post-btn"
+              onClick={() =>
+                navigate({
+                  to: '$postId',
+                  params: { postId: '1' },
+                })
+              }
+            >
+              To first post
+            </button>
+            <button
+              data-testid="second-post-btn"
+              onClick={() =>
+                navigate({
+                  to: '$postId',
+                  params: { postId: '2' },
+                })
+              }
+            >
+              To second post
+            </button>
+            <button
+              data-testid="to-posts-index-btn"
+              onClick={() =>
+                navigate({
+                  from: '/posts',
+                  to: '.'
+                })
+              }
+            >
+              To posts list
+            </button>
             <Outlet />
           </>
         )
-      },
-    })
+      }
 
-    const PostsComponent = () => {
-      const navigate = postsRoute.useNavigate()
-      return (
-        <>
-          <h1 data-testid="posts-index-heading">Posts</h1>
-          <button
-            data-testid="first-post-btn"
-            onClick={() =>
-              navigate({
-                to: '$postId',
-                params: { postId: '1' },
-              })
-            }
-          >
-            To first post
-          </button>
-          <button
-            data-testid="second-post-btn"
-            onClick={() =>
-              navigate({
-                to: '$postId',
-                params: { postId: '2' },
-              })
-            }
-          >
-            To second post
-          </button>
-          <button
-            data-testid="to-posts-index-btn"
-            onClick={() =>
-              navigate({
-                from: '/posts',
-                to: '.'
-              })
-            }
-          >
-            To posts list
-          </button>
-          <Outlet />
-        </>
-      )
-    }
+      const PostDetailComponent = () => {
+        const navigate = postDetailRoute.useNavigate()
+        return (
+          <>
+            <h1 data-testid="post-detail-index-heading">Post Detail</h1>
+            <button
+              data-testid="post-info-btn"
+              onClick={() =>
+                navigate({
+                  to: 'info',
+                })
+              }
+            >
+              To post info
+            </button>
+            <button
+              data-testid="post-notes-btn"
+              onClick={() =>
+                navigate({
+                  to: 'notes',
+                })
+              }
+            >
+              To post notes
+            </button>
+            <button
+              data-testid="to-post-detail-index-btn"
+              onClick={() =>
+                navigate({
+                  from: '/posts/$postId',
+                  to: '.'
+                })
+              }
+            >
+              To index detail options
+            </button>
+            <Outlet />
+          </>
+        )
+      }
 
-    const PostDetailComponent = () => {
-      const navigate = postDetailRoute.useNavigate()
-      return (
-        <>
-          <h1 data-testid="post-detail-index-heading">Post Detail</h1>
-          <button
-            data-testid="post-info-btn"
-            onClick={() =>
-              navigate({
-                to: 'info',
-              })
-            }
-          >
-            To post info
-          </button>
-          <button
-            data-testid="post-notes-btn"
-            onClick={() =>
-              navigate({
-                to: 'notes',
-              })
-            }
-          >
-            To post notes
-          </button>
-          <button
-            data-testid="to-post-detail-index-btn"
-            onClick={() =>
-              navigate({
-                from: '/posts/$postId',
-                to: '.'
-              })
-            }
-          >
-            To index detail options
-          </button>
-          <Outlet />
-        </>
-      )
-    }
+      const PostInfoComponent = () => {
+        return (
+          <>
+            <h1 data-testid="post-info-heading">Post Info</h1>
+          </>
+        )
+      }
 
-    const PostInfoComponent = () => {
-      return (
-        <>
-          <h1 data-testid="post-info-heading">Post Info</h1>
-        </>
-      )
-    }
+      const PostNotesComponent = () => {
+        return (
+          <>
+            <h1 data-testid="post-notes-heading">Post Notes</h1>
+          </>
+        )
+      }
 
-    const PostNotesComponent = () => {
-      return (
-        <>
-          <h1 data-testid="post-notes-heading">Post Notes</h1>
-        </>
-      )
-    }
+      const postsRoute = createRoute({
+        getParentRoute: () => layoutRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
 
-    const postsRoute = createRoute({
-      getParentRoute: () => layoutRoute,
-      path: 'posts',
-      component: PostsComponent,
-    })
+      const postDetailRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostDetailComponent,
+      })
 
-    const postDetailRoute = createRoute({
-      getParentRoute: () => postsRoute,
-      path: '$postId',
-      component: PostDetailComponent,
-    })
+      const postInfoRoute = createRoute({
+        getParentRoute: () => postDetailRoute,
+        path: 'info',
+        component: PostInfoComponent,
+      })
 
-    const postInfoRoute = createRoute({
-      getParentRoute: () => postDetailRoute,
-      path: 'info',
-      component: PostInfoComponent,
-    })
+      const postNotesRoute = createRoute({
+        getParentRoute: () => postDetailRoute,
+        path: 'notes',
+        component: PostNotesComponent,
+      })
 
-    const postNotesRoute = createRoute({
-      getParentRoute: () => postDetailRoute,
-      path: 'notes',
-      component: PostNotesComponent,
-    })
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([
+          indexRoute,
+          layoutRoute.addChildren([postsRoute.addChildren([postDetailRoute.addChildren([postInfoRoute, postNotesRoute])])]),
+        ]),
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
 
-    const router = createRouter({
-      routeTree: rootRoute.addChildren([
-        indexRoute,
-        layoutRoute.addChildren([postsRoute.addChildren([postDetailRoute.addChildren([postInfoRoute, postNotesRoute])])]),
-      ]),
-      trailingSlash: trailingSlash ? 'always' : 'never',
-    })
+      render(<RouterProvider router={router} />)
 
-    render(<RouterProvider router={router} />)
+      const postsButton = await screen.findByTestId('posts-btn')
 
-    const postsButton = await screen.findByTestId('posts-btn')
+      fireEvent.click(postsButton)
 
-    fireEvent.click(postsButton)
+      expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts${tail}`)
 
-    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts${tail}`)
+      const firstPostButton = await screen.findByTestId('first-post-btn')
 
-    const firstPostButton = await screen.findByTestId('first-post-btn')
+      fireEvent.click(firstPostButton)
 
-    fireEvent.click(firstPostButton)
+      expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts/1${tail}`)
 
-    expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+      const postInfoButton = await screen.findByTestId('post-info-btn')
 
-    const postInfoButton = await screen.findByTestId('post-info-btn')
+      fireEvent.click(postInfoButton)
 
-    fireEvent.click(postInfoButton)
+      expect(await screen.findByTestId('post-info-heading')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
 
-    expect(await screen.findByTestId('post-info-heading')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
+      const toPostDetailIndexButton = await screen.findByTestId('to-post-detail-index-btn')
 
-    const toPostDetailIndexButton = await screen.findByTestId('to-post-detail-index-btn')
+      fireEvent.click(toPostDetailIndexButton)
 
-    fireEvent.click(toPostDetailIndexButton)
+      expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+      expect(
+        screen.queryByTestId("'post-info-heading"),
+      ).not.toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts/1${tail}`)
 
-    expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
-    expect(
-      screen.queryByTestId("'post-info-heading"),
-    ).not.toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+      const postNotesButton = await screen.findByTestId('post-notes-btn')
 
-    const postNotesButton = await screen.findByTestId('post-notes-btn')
+      fireEvent.click(postNotesButton)
 
-    fireEvent.click(postNotesButton)
+      expect(await screen.findByTestId('post-notes-heading')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
 
-    expect(await screen.findByTestId('post-notes-heading')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
+      const toPostsIndexButton = await screen.findByTestId('to-posts-index-btn')
 
-    const toPostsIndexButton = await screen.findByTestId('to-posts-index-btn')
+      fireEvent.click(toPostsIndexButton)
 
-    fireEvent.click(toPostsIndexButton)
+      expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+      expect(
+        screen.queryByTestId("'post-notes-heading"),
+      ).not.toBeInTheDocument()
+      expect(
+        screen.queryByTestId("'post-detail-index-heading"),
+      ).not.toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts${tail}`)
 
-    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
-    expect(
-      screen.queryByTestId("'post-notes-heading"),
-    ).not.toBeInTheDocument()
-    expect(
-      screen.queryByTestId("'post-detail-index-heading"),
-    ).not.toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts${tail}`)
+      const secondPostButton = await screen.findByTestId('second-post-btn')
 
-    const secondPostButton = await screen.findByTestId('second-post-btn')
+      fireEvent.click(secondPostButton)
 
-    fireEvent.click(secondPostButton)
+      expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+      expect(window.location.pathname).toEqual(`/posts/2${tail}`)
+    },
+  )
 
-    expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
-    expect(window.location.pathname).toEqual(`/posts/2${tail}`)
-  },
-)
+  describe('when on /posts/$postId and navigating to ../ with default `from` /posts', () => {
+    async function runTest(navigateVia: 'Route' | 'RouteApi') {
+      const rootRoute = createRootRoute()
 
-describe('when on /posts/$postId and navigating to ../ with default `from` /posts', () => {
-  async function runTest(navigateVia: 'Route' | 'RouteApi') {
-    const rootRoute = createRootRoute()
+      const IndexComponent = () => {
+        const navigate = useNavigate()
+        return (
+          <>
+            <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 IndexComponent = () => {
-      const navigate = useNavigate()
-      return (
-        <>
-          <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 indexRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: '/',
-      component: IndexComponent,
-    })
+      const layoutRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        id: '_layout',
+        component: () => {
+          return (
+            <>
+              <h1>Layout</h1>
+              <Outlet />
+            </>
+          )
+        },
+      })
 
-    const layoutRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      id: '_layout',
-      component: () => {
+      const PostsComponent = () => {
+        const routeNavigate = postsRoute.useNavigate()
+        const routeApiNavigate = getRouteApi('/_layout/posts').useNavigate()
         return (
           <>
-            <h1>Layout</h1>
+            <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 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 postsRoute = createRoute({
-      getParentRoute: () => layoutRoute,
-      path: 'posts',
-      component: PostsComponent,
-    })
+      const postsRoute = createRoute({
+        getParentRoute: () => layoutRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
 
-    const PostComponent = () => {
-      const params = useParams({ strict: false })
-      return (
-        <>
-          <span>Params: {params.postId}</span>
-          <Outlet />
-        </>
-      )
-    }
+      const PostComponent = () => {
+        const params = useParams({ strict: false })
+        return (
+          <>
+            <span>Params: {params.postId}</span>
+            <Outlet />
+          </>
+        )
+      }
 
-    const postRoute = createRoute({
-      getParentRoute: () => postsRoute,
-      path: '$postId',
-      component: PostComponent,
-    })
+      const postRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostComponent,
+      })
 
-    const PostIndexComponent = () => {
-      return (
-        <>
-          <h1>Post Index</h1>
-        </>
-      )
-    }
+      const PostIndexComponent = () => {
+        return (
+          <>
+            <h1>Post Index</h1>
+          </>
+        )
+      }
 
-    const postIndexRoute = createRoute({
-      getParentRoute: () => postRoute,
-      path: '/',
-      component: PostIndexComponent,
-    })
+      const postIndexRoute = createRoute({
+        getParentRoute: () => postRoute,
+        path: '/',
+        component: PostIndexComponent,
+      })
 
-    const DetailsComponent = () => {
-      return (
-        <>
-          <h1 data-testid="details-heading">Details!</h1>
-        </>
-      )
-    }
+      const DetailsComponent = () => {
+        return (
+          <>
+            <h1 data-testid="details-heading">Details!</h1>
+          </>
+        )
+      }
 
-    const detailsRoute = createRoute({
-      getParentRoute: () => postRoute,
-      path: 'details',
-      component: DetailsComponent,
-    })
+      const detailsRoute = createRoute({
+        getParentRoute: () => postRoute,
+        path: 'details',
+        component: DetailsComponent,
+      })
 
-    const router = createRouter({
-      routeTree: rootRoute.addChildren([
-        indexRoute,
-        layoutRoute.addChildren([
-          postsRoute.addChildren([
-            postRoute.addChildren([postIndexRoute, detailsRoute]),
+      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'))
+    test('Route', () => runTest('Route'))
+    test('RouteApi', () => runTest('RouteApi'))
+  })
 })
 
 describe.each([{ basepath: '' }, { basepath: '/basepath' }])(

From 012c425da2ec1a9dc77e5d359c84bc713827b9a1 Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Sun, 17 Aug 2025 15:23:55 +0200
Subject: [PATCH 07/34] replicate changes to Solid

---
 packages/solid-router/src/link.tsx            |   27 +-
 packages/solid-router/src/useNavigate.tsx     |   11 +-
 packages/solid-router/tests/link.test.tsx     |  612 +++++++++-
 .../solid-router/tests/useNavigate.test.tsx   | 1039 +++++++++++++++--
 4 files changed, 1555 insertions(+), 134 deletions(-)

diff --git a/packages/solid-router/src/link.tsx b/packages/solid-router/src/link.tsx
index cd8dbf55428..c35c6b31719 100644
--- a/packages/solid-router/src/link.tsx
+++ b/packages/solid-router/src/link.tsx
@@ -135,15 +135,30 @@ export function useLinkProps<
 
   // when `from` is not supplied, use the route of the current match as the `from` location
   // so relative routing works as expected
-  const from = useMatch({
+  // const from = useMatch({
+  //   strict: false,
+  //   select: (match) => options.from ?? match.fullPath,
+  // })
+
+  const matchIndex = useMatch({
     strict: false,
-    select: (match) => options.from ?? match.fullPath,
+    select: (match) => match.index,
   })
 
-  const _options = () => ({
-    ...options,
-    from: from(),
-  })
+  const _options = () => {
+    const currentRouteMatches= router.matchRoutes(router.latestLocation, {
+      _buildLocation: false,
+    })
+
+    const from = options.from ??
+      currentRouteMatches.slice(-1)[0]?.fullPath ??
+      router.state.matches[matchIndex()]!.fullPath
+
+    return ({
+      ...options,
+      from
+    })
+  }
 
   const next = Solid.createMemo(() => {
     currentSearch()
diff --git a/packages/solid-router/src/useNavigate.tsx b/packages/solid-router/src/useNavigate.tsx
index 96d1207533b..94c0374e223 100644
--- a/packages/solid-router/src/useNavigate.tsx
+++ b/packages/solid-router/src/useNavigate.tsx
@@ -15,7 +15,7 @@ export function useNavigate<
 >(_defaultOpts?: {
   from?: FromPathOption<TRouter, TDefaultFrom>
 }): UseNavigateResult<TDefaultFrom> {
-  const { navigate, state } = useRouter()
+  const router = useRouter()
 
   const matchIndex = useMatch({
     strict: false,
@@ -23,12 +23,17 @@ export function useNavigate<
   })
 
   return ((options: NavigateOptions) => {
-    return navigate({
+    const currentRouteMatches= router.matchRoutes(router.latestLocation, {
+      _buildLocation: false,
+    })
+
+    return router.navigate({
       ...options,
       from:
         options.from ??
         _defaultOpts?.from ??
-        state.matches[matchIndex()]!.fullPath,
+        currentRouteMatches.slice(-1)[0]?.fullPath ??
+        router.state.matches[matchIndex()]!.fullPath
     })
   }) as UseNavigateResult<TDefaultFrom>
 }
diff --git a/packages/solid-router/tests/link.test.tsx b/packages/solid-router/tests/link.test.tsx
index 9eba08fd094..7750b2d810d 100644
--- a/packages/solid-router/tests/link.test.tsx
+++ b/packages/solid-router/tests/link.test.tsx
@@ -4591,6 +4591,612 @@ describe('search middleware', () => {
   })
 })
 
+describe('relative links to current route', () => {
+  test.each([true, false])(
+    'should navigate to current route when using "." in nested route structure from Index Route with trailingSlash: %s',
+    async (trailingSlash: boolean) => {
+      const tail = trailingSlash ? '/' : ''
+
+      const rootRoute = createRootRoute()
+
+      const IndexComponent = () => {
+        return (
+          <>
+            <Link
+              data-testid="posts-link"
+              to='/post'
+            >
+              Post
+            </Link>
+            <Link
+              data-testid="search-link"
+              to='.'
+              search={{param1: 'value1'}}
+            >
+              Search
+            </Link>
+            <Link
+              data-testid="search2-link"
+              to='.'
+              search={{param1: 'value2'}}
+            >
+              Search2
+            </Link>
+            <Outlet />
+          </>
+        )
+      }
+
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+        validateSearch: z.object({
+          param1: z.string().optional(),
+        }),
+      })
+
+      const postRoute = createRoute({
+        getParentRoute: () => indexRoute,
+        path: 'post',
+        component: () => (
+          <>
+            <div>Post</div>
+          </>
+        ),
+      })
+
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+        history,
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
+
+      render(() => <RouterProvider router={router} />)
+
+      const postButton = await screen.findByTestId('posts-link')
+      const searchButton = await screen.findByTestId('search-link')
+      const searchButton2 = await screen.findByTestId('search2-link')
+
+      fireEvent.click(postButton)
+
+      await waitFor(() => {
+        expect(window.location.pathname).toBe(`/post${tail}`)
+      })
+
+      fireEvent.click(searchButton)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+        expect(router.state.location.search).toEqual({ param1: 'value1' })
+      })
+
+      fireEvent.click(searchButton2)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+        expect(router.state.location.search).toEqual({ param1: 'value2' })
+      })
+    },
+  )
+
+  test.each([true, false])(
+    'should navigate to current route with search params when using "." in nested route structure from Index Route with trailingSlash: %s',
+    async (trailingSlash: boolean) => {
+      const tail = trailingSlash ? '/' : ''
+
+      const rootRoute = createRootRoute()
+
+      const IndexComponent = () => {
+        return (
+          <>
+            <Link
+              data-testid="posts-link"
+              to='/post'
+            >
+              Post
+            </Link>
+            <Link
+              data-testid="search-link"
+              to='.'
+              search={{param1: 'value1'}}
+            >
+              Search
+            </Link>
+            <Link
+              data-testid="search2-link"
+              to='/post'
+              search={{param1: 'value2'}}
+            >
+              Search2
+            </Link>
+            <Outlet />
+          </>
+        )
+      }
+
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+        validateSearch: z.object({
+          param1: z.string().optional(),
+        }),
+      })
+
+      const postRoute = createRoute({
+        getParentRoute: () => indexRoute,
+        path: 'post',
+        component: () => <div>Post</div>,
+      })
+
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+        history,
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
+
+      render(() => <RouterProvider router={router} />)
+
+      const postButton = await screen.findByTestId('posts-link')
+
+      fireEvent.click(postButton)
+
+      await waitFor(() => {
+        expect(window.location.pathname).toBe(`/post${tail}`)
+      })
+
+      const searchButton = await screen.findByTestId('search-link')
+
+      fireEvent.click(searchButton)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+        expect(router.state.location.search).toEqual({ param1: 'value1' })
+      })
+
+      const searchButton2 = await screen.findByTestId('search2-link')
+
+      fireEvent.click(searchButton2)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+        expect(router.state.location.search).toEqual({ param1: 'value2' })
+      })
+    },
+  )
+
+  test.each([true, false])(
+    'should navigate to current route with changing path params when using "." in nested route structure with trailingSlash: %s',
+    async (trailingSlash) => {
+      const tail = trailingSlash ? '/' : ''
+      const rootRoute = createRootRoute()
+
+      const IndexComponent = () => {
+        return (
+          <>
+            <h1 data-testid="index-heading">Index</h1>
+            <Link
+              data-testid="posts-link"
+              to='/posts'
+            >
+              Posts
+            </Link>
+          </>
+        )
+      }
+
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+      })
+
+      const layoutRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        id: '_layout',
+        component: () => {
+          return (
+            <>
+              <h1>Layout</h1>
+              <Outlet />
+            </>
+          )
+        },
+      })
+
+      const PostsComponent = () => {
+        return (
+          <>
+            <h1 data-testid="posts-index-heading">Posts</h1>
+            <Link
+              data-testid="first-post-link"
+              to='$postId'
+              params={{ postId: 'id1' }}
+            >
+              To first post
+            </Link>
+            <Link
+              data-testid="second-post-link"
+              to='.'
+              params={{ postId: 'id2' }}
+            >
+              To second post
+            </Link>
+            <Outlet />
+          </>
+        )
+      }
+
+      const postsRoute = createRoute({
+        getParentRoute: () => layoutRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
+
+      const PostComponent = () => {
+        const params = useParams({ strict: false })
+        return (
+          <>
+            <span data-testid={`post-${params().postId}`}>
+              Params: {params().postId}
+            </span>
+          </>
+        )
+      }
+
+      const postRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostComponent,
+      })
+
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([
+          indexRoute,
+          layoutRoute.addChildren([postsRoute.addChildren([postRoute])]),
+        ]),
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
+
+      render(() => <RouterProvider router={router} />)
+
+      const postsButton = await screen.findByTestId('posts-link')
+
+      fireEvent.click(postsButton)
+
+      await waitFor(() => {
+        expect(window.location.pathname).toEqual(`/posts${tail}`)
+      })
+
+      const firstPostButton = await screen.findByTestId('first-post-link')
+
+      fireEvent.click(firstPostButton)
+
+      await waitFor(() => {
+        expect(window.location.pathname).toEqual(`/posts/id1${tail}`)
+      })
+
+      const secondPostButton = await screen.findByTestId('second-post-link')
+
+      fireEvent.click(secondPostButton)
+
+      await waitFor(() => {
+        expect(window.location.pathname).toEqual(`/posts/id2${tail}`)
+      })
+    },
+  )
+})
+
+describe('relative links to from route', () => {
+  test.each([true, false])(
+    'should navigate to from route when using "." in nested route structure from Index Route with trailingSlash: %s',
+    async (trailingSlash: boolean) => {
+      const tail = trailingSlash ? '/' : ''
+
+      const rootRoute = createRootRoute()
+
+      const IndexComponent = () => {
+        return (
+          <>
+            <Link
+              data-testid="posts-link"
+              to='/post'
+            >
+              Post
+            </Link>
+            <Link
+              data-testid="search-link"
+              to='.'
+              search={{param1: 'value1'}}
+            >
+              Search
+            </Link>
+            <Link
+              data-testid="home-link"
+              from='/'
+              to='.'
+            >
+              Go To Home
+            </Link>
+            <Outlet />
+          </>
+        )
+      }
+
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+        validateSearch: z.object({
+          param1: z.string().optional(),
+        }),
+      })
+
+      const postRoute = createRoute({
+        getParentRoute: () => indexRoute,
+        path: 'post',
+        component: () => <div>Post</div>,
+      })
+
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+        history,
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
+
+      render(() => <RouterProvider router={router} />)
+
+      const postButton = await screen.findByTestId('posts-link')
+
+      fireEvent.click(postButton)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+      })
+
+      const searchButton = await screen.findByTestId('search-link')
+
+      fireEvent.click(searchButton)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+        expect(router.state.location.search).toEqual({ param1: 'value1' })
+      })
+
+      const homeBtn = await screen.findByTestId('home-link')
+
+      fireEvent.click(homeBtn)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/`)
+        expect(router.state.location.search).toEqual({})
+      })
+    },
+  )
+
+  test.each([true, false])(
+    'should navigate to from route with path params when using "." in nested route structure with trailingSlash: %s',
+    async (trailingSlash) => {
+      const tail = trailingSlash ? '/' : ''
+      const rootRoute = createRootRoute()
+
+      const IndexComponent = () => {
+        return (
+          <>
+            <h1 data-testid="index-heading">Index</h1>
+            <Link
+              data-testid="posts-link"
+              to='/posts'
+            >
+              Posts
+            </Link>
+          </>
+        )
+      }
+
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+      })
+
+      const layoutRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        id: '_layout',
+        component: () => {
+          return (
+            <>
+              <h1>Layout</h1>
+              <Outlet />
+            </>
+          )
+        },
+      })
+
+      const PostsComponent = () => {
+        return (
+          <>
+            <h1 data-testid="posts-index-heading">Posts</h1>
+            <Link
+              data-testid="first-post-link"
+              to='$postId'
+              params={{ postId: '1' }}
+            >
+              To first post
+            </Link>
+            <Link
+              data-testid="second-post-link"
+              to='$postId'
+              params={{ postId: '2' }}
+            >
+              To second post
+            </Link>
+            <Link
+              data-testid="to-posts-index-link"
+              from='/posts'
+              to='.'
+            >
+              To posts list
+            </Link>
+            <Outlet />
+          </>
+        )
+      }
+
+      const PostDetailComponent = () => {
+        return (
+          <>
+            <h1 data-testid="post-detail-index-heading">Post Detail</h1>
+            <Link
+              data-testid="post-info-link"
+              to='info'
+            >
+              To post info
+            </Link>
+            <Link
+              data-testid="post-notes-link"
+              to='notes'
+            >
+              To post notes
+            </Link>
+            <Link
+              data-testid="to-post-detail-index-link"
+              from='/posts/$postId'
+              to='.'
+            >
+              To index detail options
+            </Link>
+            <Outlet />
+          </>
+        )
+      }
+
+      const PostInfoComponent = () => {
+        return (
+          <>
+            <h1 data-testid="post-info-heading">Post Info</h1>
+          </>
+        )
+      }
+
+      const PostNotesComponent = () => {
+        return (
+          <>
+            <h1 data-testid="post-notes-heading">Post Notes</h1>
+          </>
+        )
+      }
+
+      const postsRoute = createRoute({
+        getParentRoute: () => layoutRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
+
+      const postDetailRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostDetailComponent,
+      })
+
+      const postInfoRoute = createRoute({
+        getParentRoute: () => postDetailRoute,
+        path: 'info',
+        component: PostInfoComponent,
+      })
+
+      const postNotesRoute = createRoute({
+        getParentRoute: () => postDetailRoute,
+        path: 'notes',
+        component: PostNotesComponent,
+      })
+
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([
+          indexRoute,
+          layoutRoute.addChildren([postsRoute.addChildren([postDetailRoute.addChildren([postInfoRoute, postNotesRoute])])]),
+        ]),
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
+
+      render(() => <RouterProvider router={router} />)
+
+      const postsButton = await screen.findByTestId('posts-link')
+
+      fireEvent.click(postsButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('posts-index-heading')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts${tail}`)
+      })
+
+      const firstPostButton = await screen.findByTestId('first-post-link')
+
+      fireEvent.click(firstPostButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-detail-index-heading')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+      })
+
+      const postInfoButton = await screen.findByTestId('post-info-link')
+
+      fireEvent.click(postInfoButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-info-heading')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
+      })
+
+      const toPostDetailIndexButton = await screen.findByTestId('to-post-detail-index-link')
+
+      fireEvent.click(toPostDetailIndexButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-detail-index-heading')).toBeInTheDocument()
+        expect(
+          screen.queryByTestId("'post-info-heading"),
+        ).not.toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+      })
+
+      const postNotesButton = await screen.findByTestId('post-notes-link')
+
+      fireEvent.click(postNotesButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-notes-heading')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
+      })
+
+      const toPostsIndexButton = await screen.findByTestId('to-posts-index-link')
+
+      fireEvent.click(toPostsIndexButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('posts-index-heading')).toBeInTheDocument()
+        expect(
+          screen.queryByTestId("'post-notes-heading"),
+        ).not.toBeInTheDocument()
+        expect(
+          screen.queryByTestId("'post-detail-index-heading"),
+        ).not.toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts${tail}`)
+      })
+
+      const secondPostButton = await screen.findByTestId('second-post-link')
+
+      fireEvent.click(secondPostButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-detail-index-heading')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/2${tail}`)
+      })
+    },
+  )
+})
+
 describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
   'relative links with %s',
   ({ basepath }) => {
@@ -4636,7 +5242,7 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param Route</h1>
-              <Link to="./a">Link to ./a</Link>
+              <Link from={paramRoute.fullPath} to="./a">Link to ./a</Link>
               <Link to="c" unsafeRelative="path">
                 Link to c
               </Link>
@@ -4656,7 +5262,7 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param A Route</h1>
-              <Link to="..">Link to .. from /param/foo/a</Link>
+              <Link from={paramARoute.fullPath} to="..">Link to .. from /param/foo/a</Link>
               <Outlet />
             </>
           )
@@ -4937,7 +5543,7 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
 
       fireEvent.click(parentLink)
 
-      waitFor(() =>
+      await waitFor(() =>
         expect(window.location.pathname).toBe(`${basepath}/param/bar/a/b`),
       )
     })
diff --git a/packages/solid-router/tests/useNavigate.test.tsx b/packages/solid-router/tests/useNavigate.test.tsx
index cf9ef4831db..3c9aedc086a 100644
--- a/packages/solid-router/tests/useNavigate.test.tsx
+++ b/packages/solid-router/tests/useNavigate.test.tsx
@@ -1,6 +1,6 @@
 import * as Solid from 'solid-js'
 import '@testing-library/jest-dom/vitest'
-import { afterEach, describe, expect, test } from 'vitest'
+import { afterEach, beforeEach, describe, expect, test } from 'vitest'
 import {
   cleanup,
   fireEvent,
@@ -13,6 +13,7 @@ import { z } from 'zod'
 import {
   Outlet,
   RouterProvider,
+  createBrowserHistory,
   createRootRoute,
   createRoute,
   createRouteMask,
@@ -21,6 +22,14 @@ import {
   useNavigate,
   useParams,
 } from '../src'
+import type { RouterHistory } from '../src'
+
+let history: RouterHistory
+
+beforeEach(() => {
+  history = createBrowserHistory()
+  expect(window.location.pathname).toBe('/')
+})
 
 afterEach(() => {
   window.history.replaceState(null, 'root', '/')
@@ -1310,156 +1319,942 @@ test('when setting search params with 2 parallel navigate calls', async () => {
   expect(search.get('param2')).toEqual('bar')
 })
 
-describe('when on /posts/$postId and navigating to ../ with default `from` /posts', () => {
-  async function runTest(navigateVia: 'Route' | 'RouteApi') {
-    const rootRoute = createRootRoute()
 
-    const IndexComponent = () => {
-      const navigate = useNavigate()
-      return (
-        <>
-          <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>
-        </>
-      )
-    }
+describe('relative navigate to current route', () => {
+  test.each([true, false])(
+    'should navigate to current route with search params when using "." in nested route structure from Index Route with trailingSlash: %s',
+    async (trailingSlash: boolean) => {
+      const tail = trailingSlash ? '/' : ''
 
-    const indexRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      path: '/',
-      component: IndexComponent,
-    })
+      const rootRoute = createRootRoute()
 
-    const layoutRoute = createRoute({
-      getParentRoute: () => rootRoute,
-      id: '_layout',
-      component: () => {
+      const IndexComponent = () => {
+        const navigate = useNavigate()
         return (
           <>
-            <h1>Layout</h1>
+            <button
+              data-testid="posts-btn"
+              onClick={() => {
+                navigate({
+                  to: '/post',
+                })
+              }}
+            >
+              Post
+            </button>
+            <button
+              data-testid="search-btn"
+              onClick={() =>
+                navigate({
+                  to: '.',
+                  search: {
+                    param1: 'value1',
+                  },
+                })
+              }
+            >
+              Search
+            </button>
+            <button
+              data-testid="search2-btn"
+              onClick={() =>
+                navigate({
+                  to: '/post',
+                  search: {
+                    param1: 'value2',
+                  },
+                })
+              }
+            >
+              Search2
+            </button>
             <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: '../' })
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+        validateSearch: z.object({
+          param1: z.string().optional(),
+        }),
+      })
+
+      const postRoute = createRoute({
+        getParentRoute: () => indexRoute,
+        path: 'post',
+        component: () => <div>Post</div>,
+      })
+
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+        history,
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
+
+      render(() => <RouterProvider router={router} />)
+
+      const postButton = await screen.findByTestId('posts-btn')
+
+      fireEvent.click(postButton)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+      })
+
+      const searchButton = await screen.findByTestId('search-btn')
+
+      fireEvent.click(searchButton)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+        expect(router.state.location.search).toEqual({ param1: 'value1' })
+      })
+
+      const searchButton2 = await screen.findByTestId('search2-btn')
+
+      fireEvent.click(searchButton2)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+        expect(router.state.location.search).toEqual({ param1: 'value2' })
+      })
+    },
+  )
+
+  test.each([true, false])(
+    'should navigate to current route with changing path params when using "." in nested route structure with trailingSlash: %s',
+    async (trailingSlash) => {
+      const tail = trailingSlash ? '/' : ''
+      const rootRoute = createRootRoute()
+
+      const IndexComponent = () => {
+        const navigate = useNavigate()
+        return (
+          <>
+            <h1 data-testid="index-heading">Index</h1>
+            <button
+              data-testid="posts-btn"
+              onClick={() => navigate({ to: '/posts' })}
+            >
+              Posts
+            </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 navigate = useNavigate()
+
+        return (
+          <>
+            <h1 data-testid="posts-index-heading">Posts</h1>
+            <button
+              data-testid="first-post-btn"
+              onClick={() =>
+                navigate({
+                  to: '$postId',
+                  params: { postId: 'id1' },
+                })
               }
-            }}
-          >
-            To Home
-          </button>
-          <Outlet />
-        </>
-      )
-    }
+            >
+              To first post
+            </button>
+            <button
+              data-testid="second-post-btn"
+              onClick={() =>
+                navigate({
+                  to: '.',
+                  params: { postId: 'id2' },
+                })
+              }
+            >
+              To second post
+            </button>
+            <Outlet />
+          </>
+        )
+      }
 
-    const postsRoute = createRoute({
-      getParentRoute: () => layoutRoute,
-      path: 'posts',
-      component: PostsComponent,
-    })
+      const postsRoute = createRoute({
+        getParentRoute: () => layoutRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
 
-    const PostComponent = () => {
-      const params = useParams({ strict: false })
-      return (
-        <>
-          <span>Params: {params().postId}</span>
-          <Outlet />
-        </>
-      )
-    }
+      const PostComponent = () => {
+        const params = useParams({ strict: false })
+        return (
+          <>
+            <span data-testid={`post-${params().postId}`}>
+              Params: {params().postId}
+            </span>
+          </>
+        )
+      }
 
-    const postRoute = createRoute({
-      getParentRoute: () => postsRoute,
-      path: '$postId',
-      component: PostComponent,
-    })
+      const postRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostComponent,
+      })
 
-    const PostIndexComponent = () => {
-      return (
-        <>
-          <h1>Post Index</h1>
-        </>
-      )
-    }
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([
+          indexRoute,
+          layoutRoute.addChildren([postsRoute.addChildren([postRoute])]),
+        ]),
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
 
-    const postIndexRoute = createRoute({
-      getParentRoute: () => postRoute,
-      path: '/',
-      component: PostIndexComponent,
-    })
+      render(() => <RouterProvider router={router} />)
 
-    const DetailsComponent = () => {
-      return (
-        <>
-          <h1 data-testid="details-heading">Details!</h1>
-        </>
-      )
-    }
+      const postsButton = await screen.findByTestId('posts-btn')
 
-    const detailsRoute = createRoute({
-      getParentRoute: () => postRoute,
-      path: 'details',
-      component: DetailsComponent,
-    })
+      fireEvent.click(postsButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('posts-index-heading')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts${tail}`)
+      })
+
+      const firstPostButton = await screen.findByTestId('first-post-btn')
+
+      fireEvent.click(firstPostButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-id1')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/id1${tail}`)
+      })
+
+      const secondPostButton = await screen.findByTestId('second-post-btn')
+
+      fireEvent.click(secondPostButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-id2')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/id2${tail}`)
+      })
+    },
+  )
+
+  test.each([true, false])(
+    'should navigate to current route with search params when using "." in nested route structure from non-Index Route with trailingSlash: %s',
+    async (trailingSlash) => {
+      const tail = trailingSlash ? '/' : ''
+      const rootRoute = createRootRoute()
+
+      const IndexComponent = () => {
+        const navigate = useNavigate()
+        return (
+          <>
+            <h1 data-testid="index-heading">Index</h1>
+            <button
+              data-testid="posts-btn"
+              onClick={() => navigate({ to: '/posts', params: { lang: '1' } })}
+            >
+              Posts
+            </button>
+          </>
+        )
+      }
+
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+      })
+
+      const PostsComponent = () => {
+        const navigate = postsRoute.useNavigate()
+        return (
+          <>
+            <h1 data-testid="posts-index-heading">Posts</h1>
+            <button
+              data-testid="first-post-btn"
+              onClick={() =>
+                navigate({
+                  to: '$postId/detail',
+                  params: { postId: 'id1' },
+                })
+              }
+            >
+              To first post
+            </button>
+            <Outlet />
+          </>
+        )
+      }
+
+      const postsRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
+
+      const useModal = (name: string) => {
+        const currentOpen = postRoute.useSearch({
+          select: (search) => search[`_${name}`],
+        })
+
+        const navigate = useNavigate()
+
+        const setModal = (open: boolean) => {
+          navigate({
+            to: '.',
+            search: (prev: {}) => ({
+              ...prev,
+              [`_${name}`]: open ? true : undefined,
+            }),
+            resetScroll: false,
+          })
+        }
+
+        return [currentOpen, setModal] as const
+      }
+
+      function DetailComponent(props: { id: string }) {
+        const params = useParams({ strict: false })
+        const [currentTest, setTest] = useModal('test')
+
+        return (
+          <>
+            <div data-testid={`detail-heading-${props.id}`}>
+              Post Path "/{params().postId}/detail-{props.id}"!
+            </div>
+            {currentTest() ? (
+              <button
+                data-testid={`detail-btn-remove-${props.id}`}
+                onClick={() => setTest(false)}
+              >
+                Remove test
+              </button>
+            ) : (
+              <button
+                data-testid={`detail-btn-add-${props.id}`}
+                onClick={() => setTest(true)}
+              >
+                Add test
+              </button>
+            )}
+          </>
+        )
+      }
+
+      const PostComponent = () => {
+        const params = useParams({ strict: false })
+
+        return (
+          <div>
+            <div data-testid="post-heading">Post "{params().postId}"!</div>
+            <DetailComponent id={'1'} />
+            <Outlet />
+          </div>
+        )
+      }
+
+      const postRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostComponent,
+        validateSearch: z.object({
+          _test: z.boolean().optional(),
+        }),
+      })
+
+      const detailRoute = createRoute({
+        getParentRoute: () => postRoute,
+        path: 'detail',
+        component: () => <DetailComponent id={'2'} />,
+      })
+
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([
+          indexRoute,
+          postsRoute.addChildren([postRoute.addChildren([detailRoute])]),
+        ]),
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
+
+      render(() => <RouterProvider router={router} />)
+
+      const postsButton = await screen.findByTestId('posts-btn')
+
+      fireEvent.click(postsButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('posts-index-heading')).toBeInTheDocument()
+      })
+
+      const post1Button = await screen.findByTestId('first-post-btn')
+
+      fireEvent.click(post1Button)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-heading')).toBeInTheDocument()
+        expect(screen.queryByTestId('detail-heading-1')).toBeInTheDocument()
+        expect(screen.queryByTestId('detail-heading-2')).toBeInTheDocument()
+        expect(screen.queryByTestId('detail-heading-1')).toHaveTextContent(
+          'Post Path "/id1/detail-1',
+        )
+        expect(screen.queryByTestId('detail-heading-2')).toHaveTextContent(
+          'Post Path "/id1/detail-2',
+        )
+      })
+
+      const detail1AddBtn = await screen.findByTestId('detail-btn-add-1')
+
+      fireEvent.click(detail1AddBtn)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
+        expect(router.state.location.search).toEqual({ _test: true })
+      })
+
+      const detail1RemoveBtn = await screen.findByTestId('detail-btn-remove-1')
+
+      fireEvent.click(detail1RemoveBtn)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
+        expect(router.state.location.search).toEqual({})
+      })
+
+      const detail2AddBtn = await screen.findByTestId('detail-btn-add-2')
+
+      fireEvent.click(detail2AddBtn)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
+        expect(router.state.location.search).toEqual({ _test: true })
+      })
+    },
+  )
+})
 
-    const router = createRouter({
-      routeTree: rootRoute.addChildren([
-        indexRoute,
-        layoutRoute.addChildren([
-          postsRoute.addChildren([
-            postRoute.addChildren([postIndexRoute, detailsRoute]),
+describe('relative navigate to from route', () => {
+  test.each([true, false])(
+    'should navigate to from route when using "." in nested route structure from Index Route with trailingSlash: %s',
+    async (trailingSlash: boolean) => {
+      const tail = trailingSlash ? '/' : ''
+
+      const rootRoute = createRootRoute()
+
+      const IndexComponent = () => {
+        const navigate = useNavigate()
+        return (
+          <>
+            <button
+              data-testid="posts-btn"
+              onClick={() => {
+                navigate({
+                  to: '/post',
+                })
+              }}
+            >
+              Post
+            </button>
+            <button
+              data-testid="search-btn"
+              onClick={() =>
+                navigate({
+                  to: '.',
+                  search: {
+                    param1: 'value1',
+                  },
+                })
+              }
+            >
+              Search
+            </button>
+            <button
+              data-testid="home-btn"
+              onClick={() =>
+                navigate({
+                  from: '/',
+                  to: '.'
+                })
+              }
+            >
+              Go To Home
+            </button>
+            <Outlet />
+          </>
+        )
+      }
+
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+        validateSearch: z.object({
+          param1: z.string().optional(),
+        }),
+      })
+
+      const postRoute = createRoute({
+        getParentRoute: () => indexRoute,
+        path: 'post',
+        component: () => <div>Post</div>,
+      })
+
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+        history,
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
+
+      render(() => <RouterProvider router={router} />)
+
+      const postButton = await screen.findByTestId('posts-btn')
+
+      fireEvent.click(postButton)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+      })
+
+      const searchButton = await screen.findByTestId('search-btn')
+
+      fireEvent.click(searchButton)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+        expect(router.state.location.search).toEqual({ param1: 'value1' })
+      })
+
+      const homeBtn = await screen.findByTestId('home-btn')
+
+      fireEvent.click(homeBtn)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/`)
+        expect(router.state.location.search).toEqual({})
+      })
+    },
+  )
+
+  test.each([true, false])(
+    'should navigate to from route with path params when using "." in nested route structure with trailingSlash: %s',
+    async (trailingSlash) => {
+      const tail = trailingSlash ? '/' : ''
+      const rootRoute = createRootRoute()
+
+      const IndexComponent = () => {
+        const navigate = useNavigate()
+        return (
+          <>
+            <h1 data-testid="index-heading">Index</h1>
+            <button
+              data-testid="posts-btn"
+              onClick={() => navigate({ to: '/posts' })}
+            >
+              Posts
+            </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 navigate = postsRoute.useNavigate()
+        return (
+          <>
+            <h1 data-testid="posts-index-heading">Posts</h1>
+            <button
+              data-testid="first-post-btn"
+              onClick={() =>
+                navigate({
+                  to: '$postId',
+                  params: { postId: '1' },
+                })
+              }
+            >
+              To first post
+            </button>
+            <button
+              data-testid="second-post-btn"
+              onClick={() =>
+                navigate({
+                  to: '$postId',
+                  params: { postId: '2' },
+                })
+              }
+            >
+              To second post
+            </button>
+            <button
+              data-testid="to-posts-index-btn"
+              onClick={() =>
+                navigate({
+                  from: '/posts',
+                  to: '.'
+                })
+              }
+            >
+              To posts list
+            </button>
+            <Outlet />
+          </>
+        )
+      }
+
+      const PostDetailComponent = () => {
+        const navigate = postDetailRoute.useNavigate()
+        return (
+          <>
+            <h1 data-testid="post-detail-index-heading">Post Detail</h1>
+            <button
+              data-testid="post-info-btn"
+              onClick={() =>
+                navigate({
+                  to: 'info',
+                })
+              }
+            >
+              To post info
+            </button>
+            <button
+              data-testid="post-notes-btn"
+              onClick={() =>
+                navigate({
+                  to: 'notes',
+                })
+              }
+            >
+              To post notes
+            </button>
+            <button
+              data-testid="to-post-detail-index-btn"
+              onClick={() =>
+                navigate({
+                  from: '/posts/$postId',
+                  to: '.'
+                })
+              }
+            >
+              To index detail options
+            </button>
+            <Outlet />
+          </>
+        )
+      }
+
+      const PostInfoComponent = () => {
+        return (
+          <>
+            <h1 data-testid="post-info-heading">Post Info</h1>
+          </>
+        )
+      }
+
+      const PostNotesComponent = () => {
+        return (
+          <>
+            <h1 data-testid="post-notes-heading">Post Notes</h1>
+          </>
+        )
+      }
+
+      const postsRoute = createRoute({
+        getParentRoute: () => layoutRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
+
+      const postDetailRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostDetailComponent,
+      })
+
+      const postInfoRoute = createRoute({
+        getParentRoute: () => postDetailRoute,
+        path: 'info',
+        component: PostInfoComponent,
+      })
+
+      const postNotesRoute = createRoute({
+        getParentRoute: () => postDetailRoute,
+        path: 'notes',
+        component: PostNotesComponent,
+      })
+
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([
+          indexRoute,
+          layoutRoute.addChildren([postsRoute.addChildren([postDetailRoute.addChildren([postInfoRoute, postNotesRoute])])]),
+        ]),
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
+
+      render(() => <RouterProvider router={router} />)
+
+      const postsButton = await screen.findByTestId('posts-btn')
+
+      fireEvent.click(postsButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('posts-index-heading')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts${tail}`)
+      })
+
+      const firstPostButton = await screen.findByTestId('first-post-btn')
+
+      fireEvent.click(firstPostButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-detail-index-heading')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+      })
+
+      const postInfoButton = await screen.findByTestId('post-info-btn')
+
+      fireEvent.click(postInfoButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-info-heading')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
+      })
+
+      const toPostDetailIndexButton = await screen.findByTestId('to-post-detail-index-btn')
+
+      fireEvent.click(toPostDetailIndexButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-detail-index-heading')).toBeInTheDocument()
+        expect(
+          screen.queryByTestId("'post-info-heading"),
+        ).not.toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+      })
+
+      const postNotesButton = await screen.findByTestId('post-notes-btn')
+
+      fireEvent.click(postNotesButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-notes-heading')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
+      })
+
+      const toPostsIndexButton = await screen.findByTestId('to-posts-index-btn')
+
+      fireEvent.click(toPostsIndexButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('posts-index-heading')).toBeInTheDocument()
+        expect(
+          screen.queryByTestId("'post-notes-heading"),
+        ).not.toBeInTheDocument()
+        expect(
+          screen.queryByTestId("'post-detail-index-heading"),
+        ).not.toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts${tail}`)
+      })
+
+      const secondPostButton = await screen.findByTestId('second-post-btn')
+
+      fireEvent.click(secondPostButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-detail-index-heading')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/2${tail}`)
+      })
+    },
+  )
+
+  describe('when on /posts/$postId and navigating to ../ with default `from` /posts', () => {
+    async function runTest(navigateVia: 'Route' | 'RouteApi') {
+      const rootRoute = createRootRoute()
+
+      const IndexComponent = () => {
+        const navigate = useNavigate()
+        return (
+          <>
+            <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 postsRoute = createRoute({
+        getParentRoute: () => layoutRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
+
+      const PostComponent = () => {
+        const params = useParams({ strict: false })
+        return (
+          <>
+            <span>Params: {params().postId}</span>
+            <Outlet />
+          </>
+        )
+      }
+
+      const postRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostComponent,
+      })
+
+      const PostIndexComponent = () => {
+        return (
+          <>
+            <h1>Post Index</h1>
+          </>
+        )
+      }
+
+      const postIndexRoute = createRoute({
+        getParentRoute: () => postRoute,
+        path: '/',
+        component: PostIndexComponent,
+      })
+
+      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'))
+    test('Route', () => runTest('Route'))
+    test('RouteApi', () => runTest('RouteApi'))
+  })
 })
 
+
 describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
   'relative useNavigate with %s',
   ({ basepath }) => {
@@ -1509,7 +2304,7 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param Route</h1>
-              <button onClick={() => navigate({ to: './a' })}>
+              <button onClick={() => navigate({ from: paramRoute.fullPath ,to: './a' })}>
                 Link to ./a
               </button>
               <button
@@ -1531,7 +2326,7 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param A Route</h1>
-              <button onClick={() => navigate({ to: '..' })}>
+              <button onClick={() => navigate({ from: paramARoute.fullPath, to: '..' })}>
                 Link to .. from /param/foo/a
               </button>
               <Outlet />

From c681d9d422b3b59b5a284437827c3e0d80ecff54 Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Sun, 17 Aug 2025 15:31:46 +0200
Subject: [PATCH 08/34] update docs

---
 docs/router/framework/react/guide/navigation.md | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/docs/router/framework/react/guide/navigation.md b/docs/router/framework/react/guide/navigation.md
index 26b8a02ce3f..538de8d4e9b 100644
--- a/docs/router/framework/react/guide/navigation.md
+++ b/docs/router/framework/react/guide/navigation.md
@@ -183,7 +183,7 @@ Keep in mind that normally dynamic segment params are `string` values, but they
 
 By default, all links are absolute unless a `from` route path is provided. This means that the above link will always navigate to the `/about` route regardless of what route you are currently on.
 
-If you want to make a link that is relative to the current route, you can provide a `from` route path:
+Relative links will always apply to the current location. To make it relative to another route, you can provide a `from` route path:
 
 ```tsx
 const postIdRoute = createRoute({
@@ -201,9 +201,9 @@ As seen above, it's common to provide the `route.fullPath` as the `from` route p
 
 ### Special relative paths: `"."` and `".."`
 
-Quite often you might want to reload the current location, for example, to rerun the loaders on the current and/or parent routes, or maybe there was a change in search parameters. This can be achieved by specifying a `to` route path of `"."` which will reload the current location. This is only applicable to the current location, and hence any `from` route path specified is ignored.
+Quite often you might want to reload the current location or another `from` path, for example, to rerun the loaders on the current and/or parent routes, or maybe navigate back to a parent route. This can be achieved by specifying a `to` route path of `"."` which will reload the current location or provided `from` path.
 
-Another common need is to navigate one route back relative to the current location or some other matched route in the current tree. By specifying a `to` route path of `".."` navigation will be resolved to either the first parent route preceding the current location or, if specified, preceding the `"from"` route path.
+Another common need is to navigate one route back relative to the current location or another path. By specifying a `to` route path of `".."` navigation will be resolved to the first parent route preceding the current location.
 
 ```tsx
 export const Route = createFileRoute('/posts/$postId')({
@@ -214,7 +214,14 @@ function PostComponent() {
   return (
     <div>
       <Link to=".">Reload the current route of /posts/$postId</Link>
-      <Link to="..">Navigate to /posts</Link>
+      <Link to="..">Navigate back to /posts</Link>
+      // the below are all equivalent
+      <Link to="/posts">Navigate back to /posts</Link>
+      <Link from="/posts" to=".">
+        Navigate back to /posts
+      </Link>
+      // the below are all equivalent
+      <Link to="/">Navigate to root</Link>
       <Link from="/posts" to="..">
         Navigate to root
       </Link>

From c4b851ec3e079818656731dd3a650c2b5bf50a56 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 17 Aug 2025 13:50:59 +0000
Subject: [PATCH 09/34] ci: apply automated fixes

---
 packages/react-router/src/link.tsx            |  18 ++-
 packages/react-router/src/useNavigate.tsx     |   2 +-
 packages/react-router/tests/link.test.tsx     | 153 +++++++++---------
 .../react-router/tests/useNavigate.test.tsx   |  62 +++++--
 packages/solid-router/src/link.tsx            |  11 +-
 packages/solid-router/src/useNavigate.tsx     |   4 +-
 packages/solid-router/tests/link.test.tsx     | 113 ++++++-------
 .../solid-router/tests/useNavigate.test.tsx   |  42 +++--
 8 files changed, 227 insertions(+), 178 deletions(-)

diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index 0c33cbd46d4..b83e8acc307 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -104,14 +104,16 @@ export function useLinkProps<
     select: (match) => match.index,
   })
 
-  const getFrom = React.useCallback( () => {
-    const currentRouteMatches= router.matchRoutes(router.latestLocation, {
+  const getFrom = React.useCallback(() => {
+    const currentRouteMatches = router.matchRoutes(router.latestLocation, {
       _buildLocation: false,
     })
 
-    return options.from ??
+    return (
+      options.from ??
       currentRouteMatches.slice(-1)[0]?.fullPath ??
       router.state.matches[matchIndex]!.fullPath
+    )
   }, [router, options.from, matchIndex])
 
   const next = React.useMemo(
@@ -192,10 +194,12 @@ export function useLinkProps<
 
   const doPreload = React.useCallback(
     () => {
-      router.preloadRoute({ ...options, from: getFrom() } as any).catch((err) => {
-        console.warn(err)
-        console.warn(preloadWarning)
-      })
+      router
+        .preloadRoute({ ...options, from: getFrom() } as any)
+        .catch((err) => {
+          console.warn(err)
+          console.warn(preloadWarning)
+        })
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
diff --git a/packages/react-router/src/useNavigate.tsx b/packages/react-router/src/useNavigate.tsx
index b4a1e1d395c..985ed477528 100644
--- a/packages/react-router/src/useNavigate.tsx
+++ b/packages/react-router/src/useNavigate.tsx
@@ -26,7 +26,7 @@ export function useNavigate<
 
   return React.useCallback(
     (options: NavigateOptions) => {
-      const currentRouteMatches= router.matchRoutes(router.latestLocation, {
+      const currentRouteMatches = router.matchRoutes(router.latestLocation, {
         _buildLocation: false,
       })
 
diff --git a/packages/react-router/tests/link.test.tsx b/packages/react-router/tests/link.test.tsx
index 90c884cfdf2..34461d51b4c 100644
--- a/packages/react-router/tests/link.test.tsx
+++ b/packages/react-router/tests/link.test.tsx
@@ -5074,7 +5074,9 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param Route</h1>
-              <Link from={paramRoute.fullPath} to="./a">Link to ./a</Link>
+              <Link from={paramRoute.fullPath} to="./a">
+                Link to ./a
+              </Link>
               <Link to="c" unsafeRelative="path">
                 Link to c
               </Link>
@@ -5094,7 +5096,9 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param A Route</h1>
-              <Link from={paramARoute.fullPath} to="..">Link to .. from /param/foo/a</Link>
+              <Link from={paramARoute.fullPath} to="..">
+                Link to .. from /param/foo/a
+              </Link>
               <Outlet />
             </>
           )
@@ -5420,23 +5424,20 @@ describe('relative links to current route', () => {
       const IndexComponent = () => {
         return (
           <>
-            <Link
-              data-testid="posts-link"
-              to='/post'
-            >
+            <Link data-testid="posts-link" to="/post">
               Post
             </Link>
             <Link
               data-testid="search-link"
-              to='.'
-              search={{param1: 'value1'}}
+              to="."
+              search={{ param1: 'value1' }}
             >
               Search
             </Link>
             <Link
               data-testid="search2-link"
-              to='.'
-              search={{param1: 'value2'}}
+              to="."
+              search={{ param1: 'value2' }}
             >
               Search2
             </Link>
@@ -5502,23 +5503,20 @@ describe('relative links to current route', () => {
       const IndexComponent = () => {
         return (
           <>
-            <Link
-              data-testid="posts-link"
-              to='/post'
-            >
+            <Link data-testid="posts-link" to="/post">
               Post
             </Link>
             <Link
               data-testid="search-link"
-              to='.'
-              search={{param1: 'value1'}}
+              to="."
+              search={{ param1: 'value1' }}
             >
               Search
             </Link>
             <Link
               data-testid="search2-link"
-              to='/post'
-              search={{param1: 'value2'}}
+              to="/post"
+              search={{ param1: 'value2' }}
             >
               Search2
             </Link>
@@ -5582,10 +5580,7 @@ describe('relative links to current route', () => {
         return (
           <>
             <h1 data-testid="index-heading">Index</h1>
-            <Link
-              data-testid="posts-link"
-              to='/posts'
-            >
+            <Link data-testid="posts-link" to="/posts">
               Posts
             </Link>
           </>
@@ -5617,14 +5612,14 @@ describe('relative links to current route', () => {
             <h1 data-testid="posts-index-heading">Posts</h1>
             <Link
               data-testid="first-post-link"
-              to='$postId'
+              to="$postId"
               params={{ postId: 'id1' }}
             >
               To first post
             </Link>
             <Link
               data-testid="second-post-link"
-              to='.'
+              to="."
               params={{ postId: 'id2' }}
             >
               To second post
@@ -5671,7 +5666,9 @@ describe('relative links to current route', () => {
 
       await act(() => fireEvent.click(postsButton))
 
-      expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+      expect(
+        await screen.findByTestId('posts-index-heading'),
+      ).toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts${tail}`)
 
       const firstPostButton = await screen.findByTestId('first-post-link')
@@ -5702,24 +5699,17 @@ describe('relative links to from route', () => {
       const IndexComponent = () => {
         return (
           <>
-            <Link
-              data-testid="posts-link"
-              to='/post'
-            >
+            <Link data-testid="posts-link" to="/post">
               Post
             </Link>
             <Link
               data-testid="search-link"
-              to='.'
-              search={{param1: 'value1'}}
+              to="."
+              search={{ param1: 'value1' }}
             >
               Search
             </Link>
-            <Link
-              data-testid="home-link"
-              from='/'
-              to='.'
-            >
+            <Link data-testid="home-link" from="/" to=".">
               Go To Home
             </Link>
             <Outlet />
@@ -5782,10 +5772,7 @@ describe('relative links to from route', () => {
         return (
           <>
             <h1 data-testid="index-heading">Index</h1>
-            <Link
-              data-testid="posts-link"
-              to='/posts'
-            >
+            <Link data-testid="posts-link" to="/posts">
               Posts
             </Link>
           </>
@@ -5817,23 +5804,19 @@ describe('relative links to from route', () => {
             <h1 data-testid="posts-index-heading">Posts</h1>
             <Link
               data-testid="first-post-link"
-              to='$postId'
+              to="$postId"
               params={{ postId: '1' }}
             >
               To first post
             </Link>
             <Link
               data-testid="second-post-link"
-              to='$postId'
+              to="$postId"
               params={{ postId: '2' }}
             >
               To second post
             </Link>
-            <Link
-              data-testid="to-posts-index-link"
-              from='/posts'
-              to='.'
-            >
+            <Link data-testid="to-posts-index-link" from="/posts" to=".">
               To posts list
             </Link>
             <Outlet />
@@ -5845,22 +5828,16 @@ describe('relative links to from route', () => {
         return (
           <>
             <h1 data-testid="post-detail-index-heading">Post Detail</h1>
-            <Link
-              data-testid="post-info-link"
-              to='info'
-            >
+            <Link data-testid="post-info-link" to="info">
               To post info
             </Link>
-            <Link
-              data-testid="post-notes-link"
-              to='notes'
-            >
+            <Link data-testid="post-notes-link" to="notes">
               To post notes
             </Link>
             <Link
               data-testid="to-post-detail-index-link"
-              from='/posts/$postId'
-              to='.'
+              from="/posts/$postId"
+              to="."
             >
               To index detail options
             </Link>
@@ -5912,7 +5889,11 @@ describe('relative links to from route', () => {
       const router = createRouter({
         routeTree: rootRoute.addChildren([
           indexRoute,
-          layoutRoute.addChildren([postsRoute.addChildren([postDetailRoute.addChildren([postInfoRoute, postNotesRoute])])]),
+          layoutRoute.addChildren([
+            postsRoute.addChildren([
+              postDetailRoute.addChildren([postInfoRoute, postNotesRoute]),
+            ]),
+          ]),
         ]),
         trailingSlash: trailingSlash ? 'always' : 'never',
       })
@@ -5923,14 +5904,18 @@ describe('relative links to from route', () => {
 
       fireEvent.click(postsButton)
 
-      expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+      expect(
+        await screen.findByTestId('posts-index-heading'),
+      ).toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts${tail}`)
 
       const firstPostButton = await screen.findByTestId('first-post-link')
 
       fireEvent.click(firstPostButton)
 
-      expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+      expect(
+        await screen.findByTestId('post-detail-index-heading'),
+      ).toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts/1${tail}`)
 
       const postInfoButton = await screen.findByTestId('post-info-link')
@@ -5940,28 +5925,36 @@ describe('relative links to from route', () => {
       expect(await screen.findByTestId('post-info-heading')).toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
 
-      const toPostDetailIndexButton = await screen.findByTestId('to-post-detail-index-link')
+      const toPostDetailIndexButton = await screen.findByTestId(
+        'to-post-detail-index-link',
+      )
 
       fireEvent.click(toPostDetailIndexButton)
 
-      expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
       expect(
-        screen.queryByTestId("'post-info-heading"),
-      ).not.toBeInTheDocument()
+        await screen.findByTestId('post-detail-index-heading'),
+      ).toBeInTheDocument()
+      expect(screen.queryByTestId("'post-info-heading")).not.toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts/1${tail}`)
 
       const postNotesButton = await screen.findByTestId('post-notes-link')
 
       fireEvent.click(postNotesButton)
 
-      expect(await screen.findByTestId('post-notes-heading')).toBeInTheDocument()
+      expect(
+        await screen.findByTestId('post-notes-heading'),
+      ).toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
 
-      const toPostsIndexButton = await screen.findByTestId('to-posts-index-link')
+      const toPostsIndexButton = await screen.findByTestId(
+        'to-posts-index-link',
+      )
 
       fireEvent.click(toPostsIndexButton)
 
-      expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+      expect(
+        await screen.findByTestId('posts-index-heading'),
+      ).toBeInTheDocument()
       expect(
         screen.queryByTestId("'post-notes-heading"),
       ).not.toBeInTheDocument()
@@ -5974,7 +5967,9 @@ describe('relative links to from route', () => {
 
       fireEvent.click(secondPostButton)
 
-      expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+      expect(
+        await screen.findByTestId('post-detail-index-heading'),
+      ).toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts/2${tail}`)
     },
   )
@@ -5988,10 +5983,12 @@ describe('when on /posts/$postId and navigating to ../ with default `from` /post
       return (
         <>
           <h1 data-testid="index-heading">Index</h1>
-          <Link data-testid="posts-link" to='/posts'>Posts</Link>
+          <Link data-testid="posts-link" to="/posts">
+            Posts
+          </Link>
           <Link
             data-testid="index-to-first-post-link"
-            to='/posts/$postId/details'
+            to="/posts/$postId/details"
             params={{ postId: 'id1' }}
           >
             To first post
@@ -6022,12 +6019,24 @@ describe('when on /posts/$postId and navigating to ../ with default `from` /post
     const PostsComponent = () => {
       const linkVia = () => {
         if (navigateVia === 'Route') {
-          return <Link from={postsRoute.fullPath} to='../' data-testid="link-to-home">To Home</Link>
+          return (
+            <Link
+              from={postsRoute.fullPath}
+              to="../"
+              data-testid="link-to-home"
+            >
+              To Home
+            </Link>
+          )
         }
 
         const RouteApiLink = getRouteApi('/_layout/posts').Link
 
-        return <RouteApiLink to='../' data-testid="link-to-home">To Home</RouteApiLink>
+        return (
+          <RouteApiLink to="../" data-testid="link-to-home">
+            To Home
+          </RouteApiLink>
+        )
       }
 
       return (
diff --git a/packages/react-router/tests/useNavigate.test.tsx b/packages/react-router/tests/useNavigate.test.tsx
index 51fe8d28ede..02e036901d4 100644
--- a/packages/react-router/tests/useNavigate.test.tsx
+++ b/packages/react-router/tests/useNavigate.test.tsx
@@ -1574,7 +1574,9 @@ describe('relative navigate to current route', () => {
 
       fireEvent.click(postsButton)
 
-      expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+      expect(
+        await screen.findByTestId('posts-index-heading'),
+      ).toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts${tail}`)
 
       const firstPostButton = await screen.findByTestId('first-post-btn')
@@ -1740,7 +1742,9 @@ describe('relative navigate to current route', () => {
 
       await act(() => fireEvent.click(postsButton))
 
-      expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+      expect(
+        await screen.findByTestId('posts-index-heading'),
+      ).toBeInTheDocument()
 
       const post1Button = await screen.findByTestId('first-post-btn')
 
@@ -1820,7 +1824,7 @@ describe('relative navigate to from route', () => {
               onClick={() =>
                 navigate({
                   from: '/',
-                  to: '.'
+                  to: '.',
                 })
               }
             >
@@ -1948,7 +1952,7 @@ describe('relative navigate to from route', () => {
               onClick={() =>
                 navigate({
                   from: '/posts',
-                  to: '.'
+                  to: '.',
                 })
               }
             >
@@ -1989,7 +1993,7 @@ describe('relative navigate to from route', () => {
               onClick={() =>
                 navigate({
                   from: '/posts/$postId',
-                  to: '.'
+                  to: '.',
                 })
               }
             >
@@ -2043,7 +2047,11 @@ describe('relative navigate to from route', () => {
       const router = createRouter({
         routeTree: rootRoute.addChildren([
           indexRoute,
-          layoutRoute.addChildren([postsRoute.addChildren([postDetailRoute.addChildren([postInfoRoute, postNotesRoute])])]),
+          layoutRoute.addChildren([
+            postsRoute.addChildren([
+              postDetailRoute.addChildren([postInfoRoute, postNotesRoute]),
+            ]),
+          ]),
         ]),
         trailingSlash: trailingSlash ? 'always' : 'never',
       })
@@ -2054,14 +2062,18 @@ describe('relative navigate to from route', () => {
 
       fireEvent.click(postsButton)
 
-      expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+      expect(
+        await screen.findByTestId('posts-index-heading'),
+      ).toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts${tail}`)
 
       const firstPostButton = await screen.findByTestId('first-post-btn')
 
       fireEvent.click(firstPostButton)
 
-      expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+      expect(
+        await screen.findByTestId('post-detail-index-heading'),
+      ).toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts/1${tail}`)
 
       const postInfoButton = await screen.findByTestId('post-info-btn')
@@ -2071,28 +2083,34 @@ describe('relative navigate to from route', () => {
       expect(await screen.findByTestId('post-info-heading')).toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
 
-      const toPostDetailIndexButton = await screen.findByTestId('to-post-detail-index-btn')
+      const toPostDetailIndexButton = await screen.findByTestId(
+        'to-post-detail-index-btn',
+      )
 
       fireEvent.click(toPostDetailIndexButton)
 
-      expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
       expect(
-        screen.queryByTestId("'post-info-heading"),
-      ).not.toBeInTheDocument()
+        await screen.findByTestId('post-detail-index-heading'),
+      ).toBeInTheDocument()
+      expect(screen.queryByTestId("'post-info-heading")).not.toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts/1${tail}`)
 
       const postNotesButton = await screen.findByTestId('post-notes-btn')
 
       fireEvent.click(postNotesButton)
 
-      expect(await screen.findByTestId('post-notes-heading')).toBeInTheDocument()
+      expect(
+        await screen.findByTestId('post-notes-heading'),
+      ).toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
 
       const toPostsIndexButton = await screen.findByTestId('to-posts-index-btn')
 
       fireEvent.click(toPostsIndexButton)
 
-      expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
+      expect(
+        await screen.findByTestId('posts-index-heading'),
+      ).toBeInTheDocument()
       expect(
         screen.queryByTestId("'post-notes-heading"),
       ).not.toBeInTheDocument()
@@ -2105,7 +2123,9 @@ describe('relative navigate to from route', () => {
 
       fireEvent.click(secondPostButton)
 
-      expect(await screen.findByTestId('post-detail-index-heading')).toBeInTheDocument()
+      expect(
+        await screen.findByTestId('post-detail-index-heading'),
+      ).toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts/2${tail}`)
     },
   )
@@ -2310,7 +2330,11 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param Route</h1>
-              <button onClick={() => navigate({ from: paramRoute.fullPath, to: './a' })}>
+              <button
+                onClick={() =>
+                  navigate({ from: paramRoute.fullPath, to: './a' })
+                }
+              >
                 Link to ./a
               </button>
               <button
@@ -2332,7 +2356,11 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param A Route</h1>
-              <button onClick={() => navigate({ from: paramARoute.fullPath, to: '..' })}>
+              <button
+                onClick={() =>
+                  navigate({ from: paramARoute.fullPath, to: '..' })
+                }
+              >
                 Link to .. from /param/foo/a
               </button>
               <Outlet />
diff --git a/packages/solid-router/src/link.tsx b/packages/solid-router/src/link.tsx
index c35c6b31719..769ea99c319 100644
--- a/packages/solid-router/src/link.tsx
+++ b/packages/solid-router/src/link.tsx
@@ -146,18 +146,19 @@ export function useLinkProps<
   })
 
   const _options = () => {
-    const currentRouteMatches= router.matchRoutes(router.latestLocation, {
+    const currentRouteMatches = router.matchRoutes(router.latestLocation, {
       _buildLocation: false,
     })
 
-    const from = options.from ??
+    const from =
+      options.from ??
       currentRouteMatches.slice(-1)[0]?.fullPath ??
       router.state.matches[matchIndex()]!.fullPath
 
-    return ({
+    return {
       ...options,
-      from
-    })
+      from,
+    }
   }
 
   const next = Solid.createMemo(() => {
diff --git a/packages/solid-router/src/useNavigate.tsx b/packages/solid-router/src/useNavigate.tsx
index 94c0374e223..5b447507146 100644
--- a/packages/solid-router/src/useNavigate.tsx
+++ b/packages/solid-router/src/useNavigate.tsx
@@ -23,7 +23,7 @@ export function useNavigate<
   })
 
   return ((options: NavigateOptions) => {
-    const currentRouteMatches= router.matchRoutes(router.latestLocation, {
+    const currentRouteMatches = router.matchRoutes(router.latestLocation, {
       _buildLocation: false,
     })
 
@@ -33,7 +33,7 @@ export function useNavigate<
         options.from ??
         _defaultOpts?.from ??
         currentRouteMatches.slice(-1)[0]?.fullPath ??
-        router.state.matches[matchIndex()]!.fullPath
+        router.state.matches[matchIndex()]!.fullPath,
     })
   }) as UseNavigateResult<TDefaultFrom>
 }
diff --git a/packages/solid-router/tests/link.test.tsx b/packages/solid-router/tests/link.test.tsx
index 7750b2d810d..21b045cbf1f 100644
--- a/packages/solid-router/tests/link.test.tsx
+++ b/packages/solid-router/tests/link.test.tsx
@@ -4602,23 +4602,20 @@ describe('relative links to current route', () => {
       const IndexComponent = () => {
         return (
           <>
-            <Link
-              data-testid="posts-link"
-              to='/post'
-            >
+            <Link data-testid="posts-link" to="/post">
               Post
             </Link>
             <Link
               data-testid="search-link"
-              to='.'
-              search={{param1: 'value1'}}
+              to="."
+              search={{ param1: 'value1' }}
             >
               Search
             </Link>
             <Link
               data-testid="search2-link"
-              to='.'
-              search={{param1: 'value2'}}
+              to="."
+              search={{ param1: 'value2' }}
             >
               Search2
             </Link>
@@ -4690,23 +4687,20 @@ describe('relative links to current route', () => {
       const IndexComponent = () => {
         return (
           <>
-            <Link
-              data-testid="posts-link"
-              to='/post'
-            >
+            <Link data-testid="posts-link" to="/post">
               Post
             </Link>
             <Link
               data-testid="search-link"
-              to='.'
-              search={{param1: 'value1'}}
+              to="."
+              search={{ param1: 'value1' }}
             >
               Search
             </Link>
             <Link
               data-testid="search2-link"
-              to='/post'
-              search={{param1: 'value2'}}
+              to="/post"
+              search={{ param1: 'value2' }}
             >
               Search2
             </Link>
@@ -4776,10 +4770,7 @@ describe('relative links to current route', () => {
         return (
           <>
             <h1 data-testid="index-heading">Index</h1>
-            <Link
-              data-testid="posts-link"
-              to='/posts'
-            >
+            <Link data-testid="posts-link" to="/posts">
               Posts
             </Link>
           </>
@@ -4811,14 +4802,14 @@ describe('relative links to current route', () => {
             <h1 data-testid="posts-index-heading">Posts</h1>
             <Link
               data-testid="first-post-link"
-              to='$postId'
+              to="$postId"
               params={{ postId: 'id1' }}
             >
               To first post
             </Link>
             <Link
               data-testid="second-post-link"
-              to='.'
+              to="."
               params={{ postId: 'id2' }}
             >
               To second post
@@ -4899,24 +4890,17 @@ describe('relative links to from route', () => {
       const IndexComponent = () => {
         return (
           <>
-            <Link
-              data-testid="posts-link"
-              to='/post'
-            >
+            <Link data-testid="posts-link" to="/post">
               Post
             </Link>
             <Link
               data-testid="search-link"
-              to='.'
-              search={{param1: 'value1'}}
+              to="."
+              search={{ param1: 'value1' }}
             >
               Search
             </Link>
-            <Link
-              data-testid="home-link"
-              from='/'
-              to='.'
-            >
+            <Link data-testid="home-link" from="/" to=".">
               Go To Home
             </Link>
             <Outlet />
@@ -4985,10 +4969,7 @@ describe('relative links to from route', () => {
         return (
           <>
             <h1 data-testid="index-heading">Index</h1>
-            <Link
-              data-testid="posts-link"
-              to='/posts'
-            >
+            <Link data-testid="posts-link" to="/posts">
               Posts
             </Link>
           </>
@@ -5020,23 +5001,19 @@ describe('relative links to from route', () => {
             <h1 data-testid="posts-index-heading">Posts</h1>
             <Link
               data-testid="first-post-link"
-              to='$postId'
+              to="$postId"
               params={{ postId: '1' }}
             >
               To first post
             </Link>
             <Link
               data-testid="second-post-link"
-              to='$postId'
+              to="$postId"
               params={{ postId: '2' }}
             >
               To second post
             </Link>
-            <Link
-              data-testid="to-posts-index-link"
-              from='/posts'
-              to='.'
-            >
+            <Link data-testid="to-posts-index-link" from="/posts" to=".">
               To posts list
             </Link>
             <Outlet />
@@ -5048,22 +5025,16 @@ describe('relative links to from route', () => {
         return (
           <>
             <h1 data-testid="post-detail-index-heading">Post Detail</h1>
-            <Link
-              data-testid="post-info-link"
-              to='info'
-            >
+            <Link data-testid="post-info-link" to="info">
               To post info
             </Link>
-            <Link
-              data-testid="post-notes-link"
-              to='notes'
-            >
+            <Link data-testid="post-notes-link" to="notes">
               To post notes
             </Link>
             <Link
               data-testid="to-post-detail-index-link"
-              from='/posts/$postId'
-              to='.'
+              from="/posts/$postId"
+              to="."
             >
               To index detail options
             </Link>
@@ -5115,7 +5086,11 @@ describe('relative links to from route', () => {
       const router = createRouter({
         routeTree: rootRoute.addChildren([
           indexRoute,
-          layoutRoute.addChildren([postsRoute.addChildren([postDetailRoute.addChildren([postInfoRoute, postNotesRoute])])]),
+          layoutRoute.addChildren([
+            postsRoute.addChildren([
+              postDetailRoute.addChildren([postInfoRoute, postNotesRoute]),
+            ]),
+          ]),
         ]),
         trailingSlash: trailingSlash ? 'always' : 'never',
       })
@@ -5136,7 +5111,9 @@ describe('relative links to from route', () => {
       fireEvent.click(firstPostButton)
 
       await waitFor(() => {
-        expect(screen.queryByTestId('post-detail-index-heading')).toBeInTheDocument()
+        expect(
+          screen.queryByTestId('post-detail-index-heading'),
+        ).toBeInTheDocument()
         expect(window.location.pathname).toEqual(`/posts/1${tail}`)
       })
 
@@ -5149,12 +5126,16 @@ describe('relative links to from route', () => {
         expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
       })
 
-      const toPostDetailIndexButton = await screen.findByTestId('to-post-detail-index-link')
+      const toPostDetailIndexButton = await screen.findByTestId(
+        'to-post-detail-index-link',
+      )
 
       fireEvent.click(toPostDetailIndexButton)
 
       await waitFor(() => {
-        expect(screen.queryByTestId('post-detail-index-heading')).toBeInTheDocument()
+        expect(
+          screen.queryByTestId('post-detail-index-heading'),
+        ).toBeInTheDocument()
         expect(
           screen.queryByTestId("'post-info-heading"),
         ).not.toBeInTheDocument()
@@ -5170,7 +5151,9 @@ describe('relative links to from route', () => {
         expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
       })
 
-      const toPostsIndexButton = await screen.findByTestId('to-posts-index-link')
+      const toPostsIndexButton = await screen.findByTestId(
+        'to-posts-index-link',
+      )
 
       fireEvent.click(toPostsIndexButton)
 
@@ -5190,7 +5173,9 @@ describe('relative links to from route', () => {
       fireEvent.click(secondPostButton)
 
       await waitFor(() => {
-        expect(screen.queryByTestId('post-detail-index-heading')).toBeInTheDocument()
+        expect(
+          screen.queryByTestId('post-detail-index-heading'),
+        ).toBeInTheDocument()
         expect(window.location.pathname).toEqual(`/posts/2${tail}`)
       })
     },
@@ -5242,7 +5227,9 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param Route</h1>
-              <Link from={paramRoute.fullPath} to="./a">Link to ./a</Link>
+              <Link from={paramRoute.fullPath} to="./a">
+                Link to ./a
+              </Link>
               <Link to="c" unsafeRelative="path">
                 Link to c
               </Link>
@@ -5262,7 +5249,9 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param A Route</h1>
-              <Link from={paramARoute.fullPath} to="..">Link to .. from /param/foo/a</Link>
+              <Link from={paramARoute.fullPath} to="..">
+                Link to .. from /param/foo/a
+              </Link>
               <Outlet />
             </>
           )
diff --git a/packages/solid-router/tests/useNavigate.test.tsx b/packages/solid-router/tests/useNavigate.test.tsx
index 3c9aedc086a..676ab63c0ea 100644
--- a/packages/solid-router/tests/useNavigate.test.tsx
+++ b/packages/solid-router/tests/useNavigate.test.tsx
@@ -1319,7 +1319,6 @@ test('when setting search params with 2 parallel navigate calls', async () => {
   expect(search.get('param2')).toEqual('bar')
 })
 
-
 describe('relative navigate to current route', () => {
   test.each([true, false])(
     'should navigate to current route with search params when using "." in nested route structure from Index Route with trailingSlash: %s',
@@ -1793,7 +1792,7 @@ describe('relative navigate to from route', () => {
               onClick={() =>
                 navigate({
                   from: '/',
-                  to: '.'
+                  to: '.',
                 })
               }
             >
@@ -1927,7 +1926,7 @@ describe('relative navigate to from route', () => {
               onClick={() =>
                 navigate({
                   from: '/posts',
-                  to: '.'
+                  to: '.',
                 })
               }
             >
@@ -1968,7 +1967,7 @@ describe('relative navigate to from route', () => {
               onClick={() =>
                 navigate({
                   from: '/posts/$postId',
-                  to: '.'
+                  to: '.',
                 })
               }
             >
@@ -2022,7 +2021,11 @@ describe('relative navigate to from route', () => {
       const router = createRouter({
         routeTree: rootRoute.addChildren([
           indexRoute,
-          layoutRoute.addChildren([postsRoute.addChildren([postDetailRoute.addChildren([postInfoRoute, postNotesRoute])])]),
+          layoutRoute.addChildren([
+            postsRoute.addChildren([
+              postDetailRoute.addChildren([postInfoRoute, postNotesRoute]),
+            ]),
+          ]),
         ]),
         trailingSlash: trailingSlash ? 'always' : 'never',
       })
@@ -2043,7 +2046,9 @@ describe('relative navigate to from route', () => {
       fireEvent.click(firstPostButton)
 
       await waitFor(() => {
-        expect(screen.queryByTestId('post-detail-index-heading')).toBeInTheDocument()
+        expect(
+          screen.queryByTestId('post-detail-index-heading'),
+        ).toBeInTheDocument()
         expect(window.location.pathname).toEqual(`/posts/1${tail}`)
       })
 
@@ -2056,12 +2061,16 @@ describe('relative navigate to from route', () => {
         expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
       })
 
-      const toPostDetailIndexButton = await screen.findByTestId('to-post-detail-index-btn')
+      const toPostDetailIndexButton = await screen.findByTestId(
+        'to-post-detail-index-btn',
+      )
 
       fireEvent.click(toPostDetailIndexButton)
 
       await waitFor(() => {
-        expect(screen.queryByTestId('post-detail-index-heading')).toBeInTheDocument()
+        expect(
+          screen.queryByTestId('post-detail-index-heading'),
+        ).toBeInTheDocument()
         expect(
           screen.queryByTestId("'post-info-heading"),
         ).not.toBeInTheDocument()
@@ -2097,7 +2106,9 @@ describe('relative navigate to from route', () => {
       fireEvent.click(secondPostButton)
 
       await waitFor(() => {
-        expect(screen.queryByTestId('post-detail-index-heading')).toBeInTheDocument()
+        expect(
+          screen.queryByTestId('post-detail-index-heading'),
+        ).toBeInTheDocument()
         expect(window.location.pathname).toEqual(`/posts/2${tail}`)
       })
     },
@@ -2254,7 +2265,6 @@ describe('relative navigate to from route', () => {
   })
 })
 
-
 describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
   'relative useNavigate with %s',
   ({ basepath }) => {
@@ -2304,7 +2314,11 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param Route</h1>
-              <button onClick={() => navigate({ from: paramRoute.fullPath ,to: './a' })}>
+              <button
+                onClick={() =>
+                  navigate({ from: paramRoute.fullPath, to: './a' })
+                }
+              >
                 Link to ./a
               </button>
               <button
@@ -2326,7 +2340,11 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
           return (
             <>
               <h1>Param A Route</h1>
-              <button onClick={() => navigate({ from: paramARoute.fullPath, to: '..' })}>
+              <button
+                onClick={() =>
+                  navigate({ from: paramARoute.fullPath, to: '..' })
+                }
+              >
                 Link to .. from /param/foo/a
               </button>
               <Outlet />

From 0f99450e6b88ad18bba0966dfa474a4c5b150c95 Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Sun, 17 Aug 2025 21:30:20 +0200
Subject: [PATCH 10/34] resolve merge issue

---
 packages/router-core/src/router.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/router-core/src/router.ts b/packages/router-core/src/router.ts
index da5c1c091b6..3021593b867 100644
--- a/packages/router-core/src/router.ts
+++ b/packages/router-core/src/router.ts
@@ -1499,11 +1499,9 @@ export class RouterCore<
           undefined,
         ).matchedRoutes
 
-        const matchedFrom = [...allCurrentLocationMatches]
-          .reverse()
-          .find((d) => {
-            return comparePaths(d.fullPath, dest.from!)
-          })
+        const matchedFrom = findLast(allCurrentLocationMatches, (d) => {
+          return comparePaths(d.fullPath, dest.from!)
+        })
 
         const matchedCurrent = [...allFromMatches].reverse().find((d) => {
           return comparePaths(d.fullPath, currentLocation.pathname)

From f9e1b8e17c1f252d37a7fd7b7fd33a613f92469a Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Sun, 17 Aug 2025 22:06:44 +0200
Subject: [PATCH 11/34] apply code rabbit suggestions

---
 packages/react-router/src/link.tsx               |  2 ++
 packages/react-router/src/useNavigate.tsx        |  2 +-
 packages/react-router/tests/link.test.tsx        |  8 ++++----
 packages/react-router/tests/useNavigate.test.tsx |  8 ++++----
 packages/router-core/src/router.ts               | 12 ++++++------
 packages/solid-router/src/link.tsx               |  6 +++++-
 packages/solid-router/tests/link.test.tsx        |  6 +++---
 packages/solid-router/tests/useNavigate.test.tsx |  7 ++++---
 8 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index b83e8acc307..a915495d526 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -131,6 +131,7 @@ export function useLinkProps<
       options.state,
       options.mask,
       options.unsafeRelative,
+      getFrom,
     ],
   )
 
@@ -220,6 +221,7 @@ export function useLinkProps<
       options.replace,
       options.resetScroll,
       options.viewTransition,
+      getFrom
     ],
   )
 
diff --git a/packages/react-router/src/useNavigate.tsx b/packages/react-router/src/useNavigate.tsx
index 985ed477528..f70f464236a 100644
--- a/packages/react-router/src/useNavigate.tsx
+++ b/packages/react-router/src/useNavigate.tsx
@@ -42,7 +42,7 @@ export function useNavigate<
       })
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [_defaultOpts?.from, router.navigate, router.latestLocation],
+    [_defaultOpts?.from, router.navigate, router.latestLocation, matchIndex],
   ) as UseNavigateResult<TDefaultFrom>
 }
 
diff --git a/packages/react-router/tests/link.test.tsx b/packages/react-router/tests/link.test.tsx
index 34461d51b4c..52e982c8ecc 100644
--- a/packages/react-router/tests/link.test.tsx
+++ b/packages/react-router/tests/link.test.tsx
@@ -5682,7 +5682,7 @@ describe('relative links to current route', () => {
 
       await act(() => fireEvent.click(secondPostButton))
 
-      // expect(await screen.findByTestId('post-id2')).toBeInTheDocument()
+      expect(await screen.findByTestId('post-id2')).toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts/id2${tail}`)
     },
   )
@@ -5934,7 +5934,7 @@ describe('relative links to from route', () => {
       expect(
         await screen.findByTestId('post-detail-index-heading'),
       ).toBeInTheDocument()
-      expect(screen.queryByTestId("'post-info-heading")).not.toBeInTheDocument()
+      expect(screen.queryByTestId('post-info-heading')).not.toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts/1${tail}`)
 
       const postNotesButton = await screen.findByTestId('post-notes-link')
@@ -5956,10 +5956,10 @@ describe('relative links to from route', () => {
         await screen.findByTestId('posts-index-heading'),
       ).toBeInTheDocument()
       expect(
-        screen.queryByTestId("'post-notes-heading"),
+        screen.queryByTestId('post-notes-heading'),
       ).not.toBeInTheDocument()
       expect(
-        screen.queryByTestId("'post-detail-index-heading"),
+        screen.queryByTestId('post-detail-index-heading'),
       ).not.toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts${tail}`)
 
diff --git a/packages/react-router/tests/useNavigate.test.tsx b/packages/react-router/tests/useNavigate.test.tsx
index 02e036901d4..3a8b7272edb 100644
--- a/packages/react-router/tests/useNavigate.test.tsx
+++ b/packages/react-router/tests/useNavigate.test.tsx
@@ -1623,7 +1623,7 @@ describe('relative navigate to current route', () => {
       })
 
       const PostsComponent = () => {
-        const navigate = postsRoute.useNavigate()
+        const navigate = useNavigate()
         return (
           <>
             <h1 data-testid="posts-index-heading">Posts</h1>
@@ -2092,7 +2092,7 @@ describe('relative navigate to from route', () => {
       expect(
         await screen.findByTestId('post-detail-index-heading'),
       ).toBeInTheDocument()
-      expect(screen.queryByTestId("'post-info-heading")).not.toBeInTheDocument()
+      expect(screen.queryByTestId('post-info-heading')).not.toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts/1${tail}`)
 
       const postNotesButton = await screen.findByTestId('post-notes-btn')
@@ -2112,10 +2112,10 @@ describe('relative navigate to from route', () => {
         await screen.findByTestId('posts-index-heading'),
       ).toBeInTheDocument()
       expect(
-        screen.queryByTestId("'post-notes-heading"),
+        screen.queryByTestId('post-notes-heading'),
       ).not.toBeInTheDocument()
       expect(
-        screen.queryByTestId("'post-detail-index-heading"),
+        screen.queryByTestId('post-detail-index-heading'),
       ).not.toBeInTheDocument()
       expect(window.location.pathname).toEqual(`/posts${tail}`)
 
diff --git a/packages/router-core/src/router.ts b/packages/router-core/src/router.ts
index 3021593b867..08d456f1640 100644
--- a/packages/router-core/src/router.ts
+++ b/packages/router-core/src/router.ts
@@ -1487,6 +1487,10 @@ export class RouterCore<
         _buildLocation: true,
       })
 
+      // Now let's find the starting pathname
+      // This should default to the current location if no from is provided
+      const lastMatch = last(allCurrentLocationMatches)!
+
       // check that from path exists in the current route tree
       // do this check only on navigations during test or development
       if (
@@ -1503,8 +1507,8 @@ export class RouterCore<
           return comparePaths(d.fullPath, dest.from!)
         })
 
-        const matchedCurrent = [...allFromMatches].reverse().find((d) => {
-          return comparePaths(d.fullPath, currentLocation.pathname)
+        const matchedCurrent = findLast(allFromMatches, (d) => {
+          return comparePaths(d.fullPath, lastMatch.fullPath)
         })
 
         // for from to be invalid it shouldn't just be unmatched to currentLocation
@@ -1514,10 +1518,6 @@ export class RouterCore<
         }
       }
 
-      // Now let's find the starting pathname
-      // This should default to the current location if no from is provided
-      const lastMatch = last(allCurrentLocationMatches)!
-
       const defaultedFromPath =
         dest.unsafeRelative === 'path'
           ? currentLocation.pathname
diff --git a/packages/solid-router/src/link.tsx b/packages/solid-router/src/link.tsx
index 769ea99c319..2d4c799f749 100644
--- a/packages/solid-router/src/link.tsx
+++ b/packages/solid-router/src/link.tsx
@@ -145,8 +145,10 @@ export function useLinkProps<
     select: (match) => match.index,
   })
 
+  const activeLocation = useRouterState({ select: (s) => s.location })
+
   const _options = () => {
-    const currentRouteMatches = router.matchRoutes(router.latestLocation, {
+    const currentRouteMatches = router.matchRoutes(activeLocation(), {
       _buildLocation: false,
     })
 
@@ -163,6 +165,8 @@ export function useLinkProps<
 
   const next = Solid.createMemo(() => {
     currentSearch()
+    // Access activeLocation to make this memo re-run on route changes
+    activeLocation()
     return router.buildLocation(_options() as any)
   })
 
diff --git a/packages/solid-router/tests/link.test.tsx b/packages/solid-router/tests/link.test.tsx
index 21b045cbf1f..f53c6d46baa 100644
--- a/packages/solid-router/tests/link.test.tsx
+++ b/packages/solid-router/tests/link.test.tsx
@@ -5137,7 +5137,7 @@ describe('relative links to from route', () => {
           screen.queryByTestId('post-detail-index-heading'),
         ).toBeInTheDocument()
         expect(
-          screen.queryByTestId("'post-info-heading"),
+          screen.queryByTestId('post-info-heading'),
         ).not.toBeInTheDocument()
         expect(window.location.pathname).toEqual(`/posts/1${tail}`)
       })
@@ -5160,10 +5160,10 @@ describe('relative links to from route', () => {
       await waitFor(() => {
         expect(screen.queryByTestId('posts-index-heading')).toBeInTheDocument()
         expect(
-          screen.queryByTestId("'post-notes-heading"),
+          screen.queryByTestId('post-notes-heading'),
         ).not.toBeInTheDocument()
         expect(
-          screen.queryByTestId("'post-detail-index-heading"),
+          screen.queryByTestId('post-detail-index-heading'),
         ).not.toBeInTheDocument()
         expect(window.location.pathname).toEqual(`/posts${tail}`)
       })
diff --git a/packages/solid-router/tests/useNavigate.test.tsx b/packages/solid-router/tests/useNavigate.test.tsx
index 676ab63c0ea..5d22b0adb76 100644
--- a/packages/solid-router/tests/useNavigate.test.tsx
+++ b/packages/solid-router/tests/useNavigate.test.tsx
@@ -32,6 +32,7 @@ beforeEach(() => {
 })
 
 afterEach(() => {
+  history.destroy()
   window.history.replaceState(null, 'root', '/')
   cleanup()
 })
@@ -2072,7 +2073,7 @@ describe('relative navigate to from route', () => {
           screen.queryByTestId('post-detail-index-heading'),
         ).toBeInTheDocument()
         expect(
-          screen.queryByTestId("'post-info-heading"),
+          screen.queryByTestId('post-info-heading'),
         ).not.toBeInTheDocument()
         expect(window.location.pathname).toEqual(`/posts/1${tail}`)
       })
@@ -2093,10 +2094,10 @@ describe('relative navigate to from route', () => {
       await waitFor(() => {
         expect(screen.queryByTestId('posts-index-heading')).toBeInTheDocument()
         expect(
-          screen.queryByTestId("'post-notes-heading"),
+          screen.queryByTestId('post-notes-heading'),
         ).not.toBeInTheDocument()
         expect(
-          screen.queryByTestId("'post-detail-index-heading"),
+          screen.queryByTestId('post-detail-index-heading'),
         ).not.toBeInTheDocument()
         expect(window.location.pathname).toEqual(`/posts${tail}`)
       })

From 7838847f66b2512fc7184ff01ce5ad8b3d7642f3 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 17 Aug 2025 20:12:41 +0000
Subject: [PATCH 12/34] ci: apply automated fixes

---
 packages/react-router/src/link.tsx               | 2 +-
 packages/react-router/tests/link.test.tsx        | 4 +---
 packages/react-router/tests/useNavigate.test.tsx | 4 +---
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index a915495d526..ed79675d8ad 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -221,7 +221,7 @@ export function useLinkProps<
       options.replace,
       options.resetScroll,
       options.viewTransition,
-      getFrom
+      getFrom,
     ],
   )
 
diff --git a/packages/react-router/tests/link.test.tsx b/packages/react-router/tests/link.test.tsx
index 52e982c8ecc..55508040e43 100644
--- a/packages/react-router/tests/link.test.tsx
+++ b/packages/react-router/tests/link.test.tsx
@@ -5955,9 +5955,7 @@ describe('relative links to from route', () => {
       expect(
         await screen.findByTestId('posts-index-heading'),
       ).toBeInTheDocument()
-      expect(
-        screen.queryByTestId('post-notes-heading'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('post-notes-heading')).not.toBeInTheDocument()
       expect(
         screen.queryByTestId('post-detail-index-heading'),
       ).not.toBeInTheDocument()
diff --git a/packages/react-router/tests/useNavigate.test.tsx b/packages/react-router/tests/useNavigate.test.tsx
index 3a8b7272edb..fe9b05b3278 100644
--- a/packages/react-router/tests/useNavigate.test.tsx
+++ b/packages/react-router/tests/useNavigate.test.tsx
@@ -2111,9 +2111,7 @@ describe('relative navigate to from route', () => {
       expect(
         await screen.findByTestId('posts-index-heading'),
       ).toBeInTheDocument()
-      expect(
-        screen.queryByTestId('post-notes-heading'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('post-notes-heading')).not.toBeInTheDocument()
       expect(
         screen.queryByTestId('post-detail-index-heading'),
       ).not.toBeInTheDocument()

From 0e3e0fd7b33939f53b1f7c6aef45e6cbf348f102 Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Sun, 17 Aug 2025 22:15:55 +0200
Subject: [PATCH 13/34] apply code rabbit doc suggestion

---
 docs/router/framework/react/guide/navigation.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/router/framework/react/guide/navigation.md b/docs/router/framework/react/guide/navigation.md
index 538de8d4e9b..a9abd1371c4 100644
--- a/docs/router/framework/react/guide/navigation.md
+++ b/docs/router/framework/react/guide/navigation.md
@@ -183,7 +183,7 @@ Keep in mind that normally dynamic segment params are `string` values, but they
 
 By default, all links are absolute unless a `from` route path is provided. This means that the above link will always navigate to the `/about` route regardless of what route you are currently on.
 
-Relative links will always apply to the current location. To make it relative to another route, you can provide a `from` route path:
+Relative links can be combined with a `from` route path. If a from route path isn't provided, relative paths default to the current active location.
 
 ```tsx
 const postIdRoute = createRoute({

From 75243b6dee98242bcecfc736a33fa9eba48ca8d7 Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Sun, 17 Aug 2025 22:22:17 +0200
Subject: [PATCH 14/34] apply code rabbit doc suggestion

---
 docs/router/framework/react/guide/navigation.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/router/framework/react/guide/navigation.md b/docs/router/framework/react/guide/navigation.md
index a9abd1371c4..3305a61bf3c 100644
--- a/docs/router/framework/react/guide/navigation.md
+++ b/docs/router/framework/react/guide/navigation.md
@@ -28,7 +28,7 @@ type ToOptions<
   TTo extends string = '',
 > = {
   // `from` is an optional route ID or path. If it is not supplied, only absolute paths will be auto-completed and type-safe. It's common to supply the route.fullPath of the origin route you are rendering from for convenience. If you don't know the origin route, leave this empty and work with absolute paths or unsafe relative paths.
-  from: string
+  from?: string
   // `to` can be an absolute route path or a relative path from the `from` option to a valid route path. ⚠️ Do not interpolate path params, hash or search params into the `to` options. Use the `params`, `search`, and `hash` options instead.
   to: string
   // `params` is either an object of path params to interpolate into the `to` option or a function that supplies the previous params and allows you to return new ones. This is the only way to interpolate dynamic parameters into the final URL. Depending on the `from` and `to` route, you may need to supply none, some or all of the path params. TypeScript will notify you of the required params if there are any.

From 7be1f7d391c66309aa36098b086d2e3eca39df94 Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Sun, 17 Aug 2025 23:22:40 +0200
Subject: [PATCH 15/34] reactivity and code cleanup

---
 packages/react-router/src/link.tsx        | 64 +++++++++--------------
 packages/react-router/src/useNavigate.tsx |  3 +-
 packages/solid-router/src/link.tsx        | 12 +++--
 packages/solid-router/src/useNavigate.tsx |  3 +-
 4 files changed, 37 insertions(+), 45 deletions(-)

diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index ed79675d8ad..4e3939e44f2 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -4,6 +4,7 @@ import {
   deepEqual,
   exactPathTest,
   functionalUpdate,
+  last,
   preloadWarning,
   removeTrailingSlash,
 } from '@tanstack/router-core'
@@ -104,24 +105,28 @@ export function useLinkProps<
     select: (match) => match.index,
   })
 
-  const getFrom = React.useCallback(() => {
-    const currentRouteMatches = router.matchRoutes(router.latestLocation, {
-      _buildLocation: false,
-    })
+  // Track the active location to ensure recomputation on path changes
+  const activeLocation = useRouterState({
+      select: (s) => s.location,
+      structuralSharing: true as any,
+  })
 
-    return (
-      options.from ??
-      currentRouteMatches.slice(-1)[0]?.fullPath ??
-      router.state.matches[matchIndex]!.fullPath
-    )
-  }, [router, options.from, matchIndex])
+  const _options = React.useMemo(() => {
+      const currentRouteMatches = router.matchRoutes(activeLocation, {
+        _buildLocation: false,
+      })
 
-  const next = React.useMemo(
-    () => router.buildLocation({ ...options, from: getFrom() } as any),
+      const from = options.from ??
+        last(currentRouteMatches)?.fullPath ??
+        router.state.matches[matchIndex]!.fullPath
+
+      return {...options, from}
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       router,
       currentSearch,
+      activeLocation,
       options._fromLocation,
       options.from,
       options.hash,
@@ -131,8 +136,12 @@ export function useLinkProps<
       options.state,
       options.mask,
       options.unsafeRelative,
-      getFrom,
-    ],
+    ]
+  )
+
+  const next = React.useMemo(
+    () => router.buildLocation({ ..._options } as any),
+    [router, _options]
   )
 
   const isExternal = type === 'external'
@@ -196,33 +205,13 @@ export function useLinkProps<
   const doPreload = React.useCallback(
     () => {
       router
-        .preloadRoute({ ...options, from: getFrom() } as any)
+        .preloadRoute({ ... _options } as any)
         .catch((err) => {
           console.warn(err)
           console.warn(preloadWarning)
         })
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      router,
-      options.to,
-      options._fromLocation,
-      options.from,
-      options.search,
-      options.hash,
-      options.params,
-      options.state,
-      options.mask,
-      options.unsafeRelative,
-      options.hashScrollIntoView,
-      options.href,
-      options.ignoreBlocker,
-      options.reloadDocument,
-      options.replace,
-      options.resetScroll,
-      options.viewTransition,
-      getFrom,
-    ],
+    [router, _options]
   )
 
   const preloadViewportIoCallback = React.useCallback(
@@ -274,8 +263,7 @@ export function useLinkProps<
       // All is well? Navigate!
       // N.B. we don't call `router.commitLocation(next) here because we want to run `validateSearch` before committing
       router.navigate({
-        ...options,
-        from: getFrom(),
+        ..._options,
         replace,
         resetScroll,
         hashScrollIntoView,
diff --git a/packages/react-router/src/useNavigate.tsx b/packages/react-router/src/useNavigate.tsx
index f70f464236a..83b5f63298c 100644
--- a/packages/react-router/src/useNavigate.tsx
+++ b/packages/react-router/src/useNavigate.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { last } from '@tanstack/router-core'
 import { useRouter } from './useRouter'
 import { useMatch } from './useMatch'
 import type {
@@ -33,7 +34,7 @@ export function useNavigate<
       const from =
         options.from ??
         _defaultOpts?.from ??
-        currentRouteMatches.slice(-1)[0]?.fullPath ??
+        last(currentRouteMatches)?.fullPath ??
         router.state.matches[matchIndex]!.fullPath
 
       return router.navigate({
diff --git a/packages/solid-router/src/link.tsx b/packages/solid-router/src/link.tsx
index 2d4c799f749..b833bac571e 100644
--- a/packages/solid-router/src/link.tsx
+++ b/packages/solid-router/src/link.tsx
@@ -6,6 +6,7 @@ import {
   deepEqual,
   exactPathTest,
   functionalUpdate,
+  last,
   preloadWarning,
   removeTrailingSlash,
 } from '@tanstack/router-core'
@@ -147,19 +148,20 @@ export function useLinkProps<
 
   const activeLocation = useRouterState({ select: (s) => s.location })
 
-  const _options = () => {
+  const from = Solid.createMemo(() => {
     const currentRouteMatches = router.matchRoutes(activeLocation(), {
       _buildLocation: false,
     })
 
-    const from =
-      options.from ??
-      currentRouteMatches.slice(-1)[0]?.fullPath ??
+    return options.from ??
+      last(currentRouteMatches)?.fullPath ??
       router.state.matches[matchIndex()]!.fullPath
+  })
 
+  const _options = () => {
     return {
       ...options,
-      from,
+      from: from(),
     }
   }
 
diff --git a/packages/solid-router/src/useNavigate.tsx b/packages/solid-router/src/useNavigate.tsx
index 5b447507146..a0b99751cb7 100644
--- a/packages/solid-router/src/useNavigate.tsx
+++ b/packages/solid-router/src/useNavigate.tsx
@@ -1,4 +1,5 @@
 import * as Solid from 'solid-js'
+import { last } from '@tanstack/router-core'
 import { useRouter } from './useRouter'
 import { useMatch } from './useMatch'
 import type {
@@ -32,7 +33,7 @@ export function useNavigate<
       from:
         options.from ??
         _defaultOpts?.from ??
-        currentRouteMatches.slice(-1)[0]?.fullPath ??
+        last(currentRouteMatches)?.fullPath ??
         router.state.matches[matchIndex()]!.fullPath,
     })
   }) as UseNavigateResult<TDefaultFrom>

From b70d1985ef7409ba6568b229a8070c3618205490 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 17 Aug 2025 22:12:12 +0000
Subject: [PATCH 16/34] ci: apply automated fixes

---
 packages/react-router/src/link.tsx | 33 ++++++++++++++----------------
 packages/solid-router/src/link.tsx |  4 +++-
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index 4e3939e44f2..d5fbe2e5a08 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -107,20 +107,22 @@ export function useLinkProps<
 
   // Track the active location to ensure recomputation on path changes
   const activeLocation = useRouterState({
-      select: (s) => s.location,
-      structuralSharing: true as any,
+    select: (s) => s.location,
+    structuralSharing: true as any,
   })
 
-  const _options = React.useMemo(() => {
+  const _options = React.useMemo(
+    () => {
       const currentRouteMatches = router.matchRoutes(activeLocation, {
         _buildLocation: false,
       })
 
-      const from = options.from ??
+      const from =
+        options.from ??
         last(currentRouteMatches)?.fullPath ??
         router.state.matches[matchIndex]!.fullPath
 
-      return {...options, from}
+      return { ...options, from }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
@@ -136,12 +138,12 @@ export function useLinkProps<
       options.state,
       options.mask,
       options.unsafeRelative,
-    ]
+    ],
   )
 
   const next = React.useMemo(
     () => router.buildLocation({ ..._options } as any),
-    [router, _options]
+    [router, _options],
   )
 
   const isExternal = type === 'external'
@@ -202,17 +204,12 @@ export function useLinkProps<
     },
   })
 
-  const doPreload = React.useCallback(
-    () => {
-      router
-        .preloadRoute({ ... _options } as any)
-        .catch((err) => {
-          console.warn(err)
-          console.warn(preloadWarning)
-        })
-    },
-    [router, _options]
-  )
+  const doPreload = React.useCallback(() => {
+    router.preloadRoute({ ..._options } as any).catch((err) => {
+      console.warn(err)
+      console.warn(preloadWarning)
+    })
+  }, [router, _options])
 
   const preloadViewportIoCallback = React.useCallback(
     (entry: IntersectionObserverEntry | undefined) => {
diff --git a/packages/solid-router/src/link.tsx b/packages/solid-router/src/link.tsx
index b833bac571e..79aed4f8f9b 100644
--- a/packages/solid-router/src/link.tsx
+++ b/packages/solid-router/src/link.tsx
@@ -153,9 +153,11 @@ export function useLinkProps<
       _buildLocation: false,
     })
 
-    return options.from ??
+    return (
+      options.from ??
       last(currentRouteMatches)?.fullPath ??
       router.state.matches[matchIndex()]!.fullPath
+    )
   })
 
   const _options = () => {

From fb75b9d81270474370445c77e8c87da7a3e0b745 Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Tue, 19 Aug 2025 00:12:47 +0200
Subject: [PATCH 17/34] cleanup tests

---
 packages/react-router/tests/link.test.tsx     |   49 +-
 .../react-router/tests/useNavigate.test.tsx   | 1539 +++++++++--------
 packages/solid-router/tests/link.test.tsx     | 1480 ++++++++--------
 .../solid-router/tests/useNavigate.test.tsx   | 1221 ++++++-------
 4 files changed, 2190 insertions(+), 2099 deletions(-)

diff --git a/packages/react-router/tests/link.test.tsx b/packages/react-router/tests/link.test.tsx
index 55508040e43..7a8971b6a30 100644
--- a/packages/react-router/tests/link.test.tsx
+++ b/packages/react-router/tests/link.test.tsx
@@ -5099,6 +5099,9 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
               <Link from={paramARoute.fullPath} to="..">
                 Link to .. from /param/foo/a
               </Link>
+              <Link to=".." data-testid={'link-to-previous'}>
+                Link to .. from current active route
+              </Link>
               <Outlet />
             </>
           )
@@ -5285,6 +5288,27 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
       expect(window.location.pathname).toBe(`${basepath}/param/foo`)
     })
 
+    test('should navigate to a parent link based on active location', async () => {
+      const router = setupRouter()
+
+      render(<RouterProvider router={router} />)
+
+      await act(async () => {
+        history.push(`${basepath}/param/foo/a/b`)
+      })
+
+      const relativeLink = await screen.findByTestId('link-to-previous')
+
+      expect(relativeLink.getAttribute('href')).toBe(`${basepath}/param/foo/a`)
+
+      // Click the link and ensure the new location
+      await act(async () => {
+        fireEvent.click(relativeLink)
+      })
+
+      expect(window.location.pathname).toBe(`${basepath}/param/foo/a`)
+    })
+
     test('should navigate to a child link based on pathname', async () => {
       const router = setupRouter()
 
@@ -6015,21 +6039,14 @@ describe('when on /posts/$postId and navigating to ../ with default `from` /post
     })
 
     const PostsComponent = () => {
-      const linkVia = () => {
-        if (navigateVia === 'Route') {
-          return (
-            <Link
-              from={postsRoute.fullPath}
-              to="../"
-              data-testid="link-to-home"
-            >
-              To Home
-            </Link>
-          )
-        }
+      const LinkViaRoute = () => (
+        <Link from={postsRoute.fullPath} to="../" data-testid="link-to-home">
+          To Home
+        </Link>
+      )
 
+      const LinkViaRouteApi = () => {
         const RouteApiLink = getRouteApi('/_layout/posts').Link
-
         return (
           <RouteApiLink to="../" data-testid="link-to-home">
             To Home
@@ -6040,7 +6057,11 @@ describe('when on /posts/$postId and navigating to ../ with default `from` /post
       return (
         <>
           <h1>Posts</h1>
-          {linkVia()}
+          {
+            navigateVia === 'Route'
+              ? <LinkViaRoute />
+              : <LinkViaRouteApi />
+          }
           <Outlet />
         </>
       )
diff --git a/packages/react-router/tests/useNavigate.test.tsx b/packages/react-router/tests/useNavigate.test.tsx
index fe9b05b3278..ebd2f0a21df 100644
--- a/packages/react-router/tests/useNavigate.test.tsx
+++ b/packages/react-router/tests/useNavigate.test.tsx
@@ -1058,13 +1058,13 @@ test('when navigating from /invoices to ./invoiceId and the current route is /po
     name: 'To first post',
   })
 
-  await act(() => fireEvent.click(postsButton))
+  fireEvent.click(postsButton)
 
   const invoicesButton = await screen.findByRole('button', {
     name: 'To Invoices',
   })
 
-  await act(() => fireEvent.click(invoicesButton))
+  fireEvent.click(invoicesButton)
 
   expect(consoleWarn).toHaveBeenCalledWith(
     'Could not find match for from: /invoices',
@@ -1366,917 +1366,912 @@ test('<Navigate> navigates only once in <StrictMode>', async () => {
   expect(navigateSpy.mock.calls.length).toBe(1)
 })
 
-describe('relative navigate to current route', () => {
-  test.each([true, false])(
-    'should navigate to current route with search params when using "." in nested route structure from Index Route with trailingSlash: %s',
-    async (trailingSlash: boolean) => {
-      const tail = trailingSlash ? '/' : ''
-
-      const rootRoute = createRootRoute()
-
-      const IndexComponent = () => {
-        const navigate = useNavigate()
-        return (
-          <>
-            <button
-              data-testid="posts-btn"
-              onClick={() => {
-                navigate({
-                  to: '/post',
-                })
-              }}
-            >
-              Post
-            </button>
-            <button
-              data-testid="search-btn"
-              onClick={() =>
-                navigate({
-                  to: '.',
-                  search: {
-                    param1: 'value1',
-                  },
-                })
-              }
-            >
-              Search
-            </button>
-            <button
-              data-testid="search2-btn"
-              onClick={() =>
-                navigate({
-                  to: '/post',
-                  search: {
-                    param1: 'value2',
-                  },
-                })
-              }
-            >
-              Search2
-            </button>
-            <Outlet />
-          </>
-        )
-      }
+test.each([true, false])(
+  'should navigate to current route with search params when using "." in nested route structure from Index Route',
+  async (trailingSlash: boolean) => {
+    const tail = trailingSlash ? '/' : ''
 
-      const indexRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        path: '/',
-        component: IndexComponent,
-        validateSearch: z.object({
-          param1: z.string().optional(),
-        }),
-      })
+    const rootRoute = createRootRoute()
 
-      const postRoute = createRoute({
-        getParentRoute: () => indexRoute,
-        path: 'post',
-        component: () => <div>Post</div>,
-      })
+    const IndexComponent = () => {
+      const navigate = useNavigate()
+      return (
+        <>
+          <button
+            data-testid="posts-btn"
+            onClick={() => {
+              navigate({
+                to: '/post',
+              })
+            }}
+          >
+            Post
+          </button>
+          <button
+            data-testid="search-btn"
+            onClick={() =>
+              navigate({
+                to: '.',
+                search: {
+                  param1: 'value1',
+                },
+              })
+            }
+          >
+            Search
+          </button>
+          <button
+            data-testid="search2-btn"
+            onClick={() =>
+              navigate({
+                to: '/post',
+                search: {
+                  param1: 'value2',
+                },
+              })
+            }
+          >
+            Search2
+          </button>
+          <Outlet />
+        </>
+      )
+    }
 
-      const router = createRouter({
-        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
-        history,
-        trailingSlash: trailingSlash ? 'always' : 'never',
-      })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+      validateSearch: z.object({
+        param1: z.string().optional(),
+      }),
+    })
 
-      render(<RouterProvider router={router} />)
+    const postRoute = createRoute({
+      getParentRoute: () => indexRoute,
+      path: 'post',
+      component: () => <div>Post</div>,
+    })
 
-      const postButton = await screen.findByTestId('posts-btn')
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+      history,
+      trailingSlash: trailingSlash ? 'always' : 'never',
+    })
 
-      await act(() => fireEvent.click(postButton))
+    render(<RouterProvider router={router} />)
 
-      expect(router.state.location.pathname).toBe(`/post${tail}`)
+    const postButton = await screen.findByTestId('posts-btn')
 
-      const searchButton = await screen.findByTestId('search-btn')
+    fireEvent.click(postButton)
 
-      await act(() => fireEvent.click(searchButton))
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
 
-      expect(router.state.location.pathname).toBe(`/post${tail}`)
-      expect(router.state.location.search).toEqual({ param1: 'value1' })
+    const searchButton = await screen.findByTestId('search-btn')
 
-      const searchButton2 = await screen.findByTestId('search2-btn')
+    fireEvent.click(searchButton)
 
-      await act(() => fireEvent.click(searchButton2))
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
+    expect(router.state.location.search).toEqual({ param1: 'value1' })
 
-      expect(router.state.location.pathname).toBe(`/post${tail}`)
-      expect(router.state.location.search).toEqual({ param1: 'value2' })
-    },
-  )
+    const searchButton2 = await screen.findByTestId('search2-btn')
 
-  test.each([true, false])(
-    'should navigate to current route with changing path params when using "." in nested route structure with trailingSlash: %s',
-    async (trailingSlash) => {
-      const tail = trailingSlash ? '/' : ''
-      const rootRoute = createRootRoute()
+    fireEvent.click(searchButton2)
 
-      const IndexComponent = () => {
-        const navigate = useNavigate()
-        return (
-          <>
-            <h1 data-testid="index-heading">Index</h1>
-            <button
-              data-testid="posts-btn"
-              onClick={() => navigate({ to: '/posts' })}
-            >
-              Posts
-            </button>
-          </>
-        )
-      }
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
+    expect(router.state.location.search).toEqual({ param1: 'value2' })
+  },
+)
 
-      const indexRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        path: '/',
-        component: IndexComponent,
-      })
+test.each([true, false])(
+  'should navigate to current route with changing path params when using "." in nested route structure',
+  async (trailingSlash) => {
+    const tail = trailingSlash ? '/' : ''
+    const rootRoute = createRootRoute()
 
-      const layoutRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        id: '_layout',
-        component: () => {
-          return (
-            <>
-              <h1>Layout</h1>
-              <Outlet />
-            </>
-          )
-        },
-      })
+    const IndexComponent = () => {
+      const navigate = useNavigate()
+      return (
+        <>
+          <h1 data-testid="index-heading">Index</h1>
+          <button
+            data-testid="posts-btn"
+            onClick={() => navigate({ to: '/posts' })}
+          >
+            Posts
+          </button>
+        </>
+      )
+    }
 
-      const PostsComponent = () => {
-        const navigate = useNavigate()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+    })
 
+    const layoutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      id: '_layout',
+      component: () => {
         return (
           <>
-            <h1 data-testid="posts-index-heading">Posts</h1>
-            <button
-              data-testid="first-post-btn"
-              onClick={() =>
-                navigate({
-                  to: '$postId',
-                  params: { postId: 'id1' },
-                })
-              }
-            >
-              To first post
-            </button>
-            <button
-              data-testid="second-post-btn"
-              onClick={() =>
-                navigate({
-                  to: '.',
-                  params: { postId: 'id2' },
-                })
-              }
-            >
-              To second post
-            </button>
+            <h1>Layout</h1>
             <Outlet />
           </>
         )
-      }
+      },
+    })
 
-      const postsRoute = createRoute({
-        getParentRoute: () => layoutRoute,
-        path: 'posts',
-        component: PostsComponent,
-      })
+    const PostsComponent = () => {
+      const navigate = useNavigate()
 
-      const PostComponent = () => {
-        const params = useParams({ strict: false })
-        return (
-          <>
-            <span data-testid={`post-${params.postId}`}>
-              Params: {params.postId}
-            </span>
-          </>
-        )
-      }
+      return (
+        <>
+          <h1 data-testid="posts-index-heading">Posts</h1>
+          <button
+            data-testid="first-post-btn"
+            onClick={() =>
+              navigate({
+                to: '$postId',
+                params: { postId: 'id1' },
+              })
+            }
+          >
+            To first post
+          </button>
+          <button
+            data-testid="second-post-btn"
+            onClick={() =>
+              navigate({
+                to: '.',
+                params: { postId: 'id2' },
+              })
+            }
+          >
+            To second post
+          </button>
+          <Outlet />
+        </>
+      )
+    }
 
-      const postRoute = createRoute({
-        getParentRoute: () => postsRoute,
-        path: '$postId',
-        component: PostComponent,
-      })
+    const postsRoute = createRoute({
+      getParentRoute: () => layoutRoute,
+      path: 'posts',
+      component: PostsComponent,
+    })
 
-      const router = createRouter({
-        routeTree: rootRoute.addChildren([
-          indexRoute,
-          layoutRoute.addChildren([postsRoute.addChildren([postRoute])]),
-        ]),
-        trailingSlash: trailingSlash ? 'always' : 'never',
-      })
+    const PostComponent = () => {
+      const params = useParams({ strict: false })
+      return (
+        <>
+          <span data-testid={`post-${params.postId}`}>
+            Params: {params.postId}
+          </span>
+        </>
+      )
+    }
 
-      render(<RouterProvider router={router} />)
+    const postRoute = createRoute({
+      getParentRoute: () => postsRoute,
+      path: '$postId',
+      component: PostComponent,
+    })
 
-      const postsButton = await screen.findByTestId('posts-btn')
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([
+        indexRoute,
+        layoutRoute.addChildren([postsRoute.addChildren([postRoute])]),
+      ]),
+      trailingSlash: trailingSlash ? 'always' : 'never',
+    })
 
-      fireEvent.click(postsButton)
+    render(<RouterProvider router={router} />)
 
-      expect(
-        await screen.findByTestId('posts-index-heading'),
-      ).toBeInTheDocument()
-      expect(window.location.pathname).toEqual(`/posts${tail}`)
+    const postsButton = await screen.findByTestId('posts-btn')
 
-      const firstPostButton = await screen.findByTestId('first-post-btn')
+    fireEvent.click(postsButton)
 
-      fireEvent.click(firstPostButton)
+    expect(
+      await screen.findByTestId('posts-index-heading'),
+    ).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts${tail}`)
 
-      expect(await screen.findByTestId('post-id1')).toBeInTheDocument()
-      expect(window.location.pathname).toEqual(`/posts/id1${tail}`)
+    const firstPostButton = await screen.findByTestId('first-post-btn')
 
-      const secondPostButton = await screen.findByTestId('second-post-btn')
+    fireEvent.click(firstPostButton)
 
-      fireEvent.click(secondPostButton)
+    expect(await screen.findByTestId('post-id1')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/id1${tail}`)
 
-      expect(await screen.findByTestId('post-id2')).toBeInTheDocument()
-      expect(window.location.pathname).toEqual(`/posts/id2${tail}`)
-    },
-  )
+    const secondPostButton = await screen.findByTestId('second-post-btn')
 
-  test.each([true, false])(
-    'should navigate to current route with search params when using "." in nested route structure from non-Index Route with trailingSlash: %s',
-    async (trailingSlash) => {
-      const tail = trailingSlash ? '/' : ''
-      const rootRoute = createRootRoute()
+    fireEvent.click(secondPostButton)
 
-      const IndexComponent = () => {
-        const navigate = useNavigate()
-        return (
-          <>
-            <h1 data-testid="index-heading">Index</h1>
-            <button
-              data-testid="posts-btn"
-              onClick={() => navigate({ to: '/posts', params: { lang: '1' } })}
-            >
-              Posts
-            </button>
-          </>
-        )
-      }
-
-      const indexRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        path: '/',
-        component: IndexComponent,
-      })
+    expect(await screen.findByTestId('post-id2')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/id2${tail}`)
+  },
+)
 
-      const PostsComponent = () => {
-        const navigate = useNavigate()
-        return (
-          <>
-            <h1 data-testid="posts-index-heading">Posts</h1>
-            <button
-              data-testid="first-post-btn"
-              onClick={() =>
-                navigate({
-                  to: '$postId/detail',
-                  params: { postId: 'id1' },
-                })
-              }
-            >
-              To first post
-            </button>
-            <Outlet />
-          </>
-        )
-      }
+test.each([true, false])(
+  'should navigate to current route with search params when using "." in nested route structure from non-Index Route',
+  async (trailingSlash) => {
+    const tail = trailingSlash ? '/' : ''
+    const rootRoute = createRootRoute()
 
-      const postsRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        path: 'posts',
-        component: PostsComponent,
-      })
+    const IndexComponent = () => {
+      const navigate = useNavigate()
+      return (
+        <>
+          <h1 data-testid="index-heading">Index</h1>
+          <button
+            data-testid="posts-btn"
+            onClick={() => navigate({ to: '/posts', params: { lang: '1' } })}
+          >
+            Posts
+          </button>
+        </>
+      )
+    }
 
-      const useModal = (name: string) => {
-        const currentOpen = postRoute.useSearch({
-          select: (search) => search[`_${name}`],
-        })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+    })
 
-        const navigate = useNavigate()
+    const PostsComponent = () => {
+      const navigate = useNavigate()
+      return (
+        <>
+          <h1 data-testid="posts-index-heading">Posts</h1>
+          <button
+            data-testid="first-post-btn"
+            onClick={() =>
+              navigate({
+                to: '$postId/detail',
+                params: { postId: 'id1' },
+              })
+            }
+          >
+            To first post
+          </button>
+          <Outlet />
+        </>
+      )
+    }
 
-        const setModal = React.useCallback(
-          (open: boolean) => {
-            navigate({
-              to: '.',
-              search: (prev: {}) => ({
-                ...prev,
-                [`_${name}`]: open ? true : undefined,
-              }),
-              resetScroll: false,
-            })
-          },
-          [name, navigate],
-        )
+    const postsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: 'posts',
+      component: PostsComponent,
+    })
 
-        return [currentOpen, setModal] as const
-      }
+    const useModal = (name: string) => {
+      const currentOpen = postRoute.useSearch({
+        select: (search) => search[`_${name}`],
+      })
 
-      function DetailComponent(props: { id: string }) {
-        const params = useParams({ strict: false })
-        const [currentTest, setTest] = useModal('test')
+      const navigate = useNavigate()
+
+      const setModal = React.useCallback(
+        (open: boolean) => {
+          navigate({
+            to: '.',
+            search: (prev: {}) => ({
+              ...prev,
+              [`_${name}`]: open ? true : undefined,
+            }),
+            resetScroll: false,
+          })
+        },
+        [name, navigate],
+      )
 
-        return (
-          <>
-            <div data-testid={`detail-heading-${props.id}`}>
-              Post Path "/{params.postId}/detail-{props.id}"!
-            </div>
-            {currentTest ? (
-              <button
-                data-testid={`detail-btn-remove-${props.id}`}
-                onClick={() => setTest(false)}
-              >
-                Remove test
-              </button>
-            ) : (
-              <button
-                data-testid={`detail-btn-add-${props.id}`}
-                onClick={() => setTest(true)}
-              >
-                Add test
-              </button>
-            )}
-          </>
-        )
-      }
+      return [currentOpen, setModal] as const
+    }
 
-      const PostComponent = () => {
-        const params = useParams({ strict: false })
+    function DetailComponent(props: { id: string }) {
+      const params = useParams({ strict: false })
+      const [currentTest, setTest] = useModal('test')
 
-        return (
-          <div>
-            <div data-testid="post-heading">Post "{params.postId}"!</div>
-            <DetailComponent id={'1'} />
-            <Outlet />
+      return (
+        <>
+          <div data-testid={`detail-heading-${props.id}`}>
+            Post Path "/{params.postId}/detail-{props.id}"!
           </div>
-        )
-      }
-
-      const postRoute = createRoute({
-        getParentRoute: () => postsRoute,
-        path: '$postId',
-        component: PostComponent,
-        validateSearch: z.object({
-          _test: z.boolean().optional(),
-        }),
-      })
+          {currentTest ? (
+            <button
+              data-testid={`detail-btn-remove-${props.id}`}
+              onClick={() => setTest(false)}
+            >
+              Remove test
+            </button>
+          ) : (
+            <button
+              data-testid={`detail-btn-add-${props.id}`}
+              onClick={() => setTest(true)}
+            >
+              Add test
+            </button>
+          )}
+        </>
+      )
+    }
 
-      const detailRoute = createRoute({
-        getParentRoute: () => postRoute,
-        path: 'detail',
-        component: () => <DetailComponent id={'2'} />,
-      })
+    const PostComponent = () => {
+      const params = useParams({ strict: false })
 
-      const router = createRouter({
-        routeTree: rootRoute.addChildren([
-          indexRoute,
-          postsRoute.addChildren([postRoute.addChildren([detailRoute])]),
-        ]),
-        trailingSlash: trailingSlash ? 'always' : 'never',
-      })
+      return (
+        <div>
+          <div data-testid="post-heading">Post "{params.postId}"!</div>
+          <DetailComponent id={'1'} />
+          <Outlet />
+        </div>
+      )
+    }
 
-      render(<RouterProvider router={router} />)
+    const postRoute = createRoute({
+      getParentRoute: () => postsRoute,
+      path: '$postId',
+      component: PostComponent,
+      validateSearch: z.object({
+        _test: z.boolean().optional(),
+      }),
+    })
 
-      const postsButton = await screen.findByTestId('posts-btn')
+    const detailRoute = createRoute({
+      getParentRoute: () => postRoute,
+      path: 'detail',
+      component: () => <DetailComponent id={'2'} />,
+    })
 
-      await act(() => fireEvent.click(postsButton))
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([
+        indexRoute,
+        postsRoute.addChildren([postRoute.addChildren([detailRoute])]),
+      ]),
+      trailingSlash: trailingSlash ? 'always' : 'never',
+    })
 
-      expect(
-        await screen.findByTestId('posts-index-heading'),
-      ).toBeInTheDocument()
+    render(<RouterProvider router={router} />)
 
-      const post1Button = await screen.findByTestId('first-post-btn')
+    const postsButton = await screen.findByTestId('posts-btn')
 
-      await act(() => fireEvent.click(post1Button))
+    fireEvent.click(postsButton)
 
-      expect(await screen.findByTestId('post-heading')).toBeInTheDocument()
-      expect(await screen.findByTestId('detail-heading-1')).toBeInTheDocument()
-      expect(await screen.findByTestId('detail-heading-2')).toBeInTheDocument()
-      expect(await screen.findByTestId('detail-heading-1')).toHaveTextContent(
-        'Post Path "/id1/detail-1',
-      )
-      expect(await screen.findByTestId('detail-heading-2')).toHaveTextContent(
-        'Post Path "/id1/detail-2',
-      )
+    expect(
+      await screen.findByTestId('posts-index-heading'),
+    ).toBeInTheDocument()
 
-      const detail1AddBtn = await screen.findByTestId('detail-btn-add-1')
+    const post1Button = await screen.findByTestId('first-post-btn')
 
-      await act(() => fireEvent.click(detail1AddBtn))
+    fireEvent.click(post1Button)
+    expect(await screen.findByTestId('post-heading')).toBeInTheDocument()
+    expect(await screen.findByTestId('detail-heading-1')).toBeInTheDocument()
+    expect(await screen.findByTestId('detail-heading-2')).toBeInTheDocument()
+    expect(await screen.findByTestId('detail-heading-1')).toHaveTextContent(
+      'Post Path "/id1/detail-1',
+    )
+    expect(await screen.findByTestId('detail-heading-2')).toHaveTextContent(
+      'Post Path "/id1/detail-2',
+    )
 
-      expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
-      expect(router.state.location.search).toEqual({ _test: true })
+    const detail1AddBtn = await screen.findByTestId('detail-btn-add-1')
 
-      const detail1RemoveBtn = await screen.findByTestId('detail-btn-remove-1')
+    fireEvent.click(detail1AddBtn)
 
-      await act(() => fireEvent.click(detail1RemoveBtn))
+    expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
+    expect(router.state.location.search).toEqual({ _test: true })
 
-      expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
-      expect(router.state.location.search).toEqual({})
+    const detail1RemoveBtn = await screen.findByTestId('detail-btn-remove-1')
 
-      const detail2AddBtn = await screen.findByTestId('detail-btn-add-2')
+    fireEvent.click(detail1RemoveBtn)
 
-      await act(() => fireEvent.click(detail2AddBtn))
+    expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
+    expect(router.state.location.search).toEqual({})
 
-      expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
-      expect(router.state.location.search).toEqual({ _test: true })
-    },
-  )
-})
+    const detail2AddBtn = await screen.findByTestId('detail-btn-add-2')
 
-describe('relative navigate to from route', () => {
-  test.each([true, false])(
-    'should navigate to from route when using "." in nested route structure from Index Route with trailingSlash: %s',
-    async (trailingSlash: boolean) => {
-      const tail = trailingSlash ? '/' : ''
+    fireEvent.click(detail2AddBtn)
 
-      const rootRoute = createRootRoute()
+    expect(router.state.location.pathname).toBe(`/posts/id1/detail${tail}`)
+    expect(router.state.location.search).toEqual({ _test: true })
+  },
+)
 
-      const IndexComponent = () => {
-        const navigate = useNavigate()
-        return (
-          <>
-            <button
-              data-testid="posts-btn"
-              onClick={() => {
-                navigate({
-                  to: '/post',
-                })
-              }}
-            >
-              Post
-            </button>
-            <button
-              data-testid="search-btn"
-              onClick={() =>
-                navigate({
-                  to: '.',
-                  search: {
-                    param1: 'value1',
-                  },
-                })
-              }
-            >
-              Search
-            </button>
-            <button
-              data-testid="home-btn"
-              onClick={() =>
-                navigate({
-                  from: '/',
-                  to: '.',
-                })
-              }
-            >
-              Go To Home
-            </button>
-            <Outlet />
-          </>
-        )
-      }
+test.each([true, false])(
+  'should navigate to from route when using "." in nested route structure from Index Route with trailingSlash: %s',
+  async (trailingSlash: boolean) => {
+    const tail = trailingSlash ? '/' : ''
 
-      const indexRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        path: '/',
-        component: IndexComponent,
-        validateSearch: z.object({
-          param1: z.string().optional(),
-        }),
-      })
+    const rootRoute = createRootRoute()
 
-      const postRoute = createRoute({
-        getParentRoute: () => indexRoute,
-        path: 'post',
-        component: () => <div>Post</div>,
-      })
+    const IndexComponent = () => {
+      const navigate = useNavigate()
+      return (
+        <>
+          <button
+            data-testid="posts-btn"
+            onClick={() => {
+              navigate({
+                to: '/post',
+              })
+            }}
+          >
+            Post
+          </button>
+          <button
+            data-testid="search-btn"
+            onClick={() =>
+              navigate({
+                to: '.',
+                search: {
+                  param1: 'value1',
+                },
+              })
+            }
+          >
+            Search
+          </button>
+          <button
+            data-testid="home-btn"
+            onClick={() =>
+              navigate({
+                from: '/',
+                to: '.',
+              })
+            }
+          >
+            Go To Home
+          </button>
+          <Outlet />
+        </>
+      )
+    }
 
-      const router = createRouter({
-        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
-        history,
-        trailingSlash: trailingSlash ? 'always' : 'never',
-      })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+      validateSearch: z.object({
+        param1: z.string().optional(),
+      }),
+    })
 
-      render(<RouterProvider router={router} />)
+    const postRoute = createRoute({
+      getParentRoute: () => indexRoute,
+      path: 'post',
+      component: () => <div>Post</div>,
+    })
 
-      const postButton = await screen.findByTestId('posts-btn')
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+      history,
+      trailingSlash: trailingSlash ? 'always' : 'never',
+    })
 
-      await act(() => fireEvent.click(postButton))
+    render(<RouterProvider router={router} />)
 
-      expect(router.state.location.pathname).toBe(`/post${tail}`)
+    const postButton = await screen.findByTestId('posts-btn')
 
-      const searchButton = await screen.findByTestId('search-btn')
+    await act(() => fireEvent.click(postButton))
 
-      await act(() => fireEvent.click(searchButton))
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
 
-      expect(router.state.location.pathname).toBe(`/post${tail}`)
-      expect(router.state.location.search).toEqual({ param1: 'value1' })
+    const searchButton = await screen.findByTestId('search-btn')
 
-      const homeBtn = await screen.findByTestId('home-btn')
+    await act(() => fireEvent.click(searchButton))
 
-      await act(() => fireEvent.click(homeBtn))
+    expect(router.state.location.pathname).toBe(`/post${tail}`)
+    expect(router.state.location.search).toEqual({ param1: 'value1' })
 
-      expect(router.state.location.pathname).toBe(`/`)
-      expect(router.state.location.search).toEqual({})
-    },
-  )
+    const homeBtn = await screen.findByTestId('home-btn')
 
-  test.each([true, false])(
-    'should navigate to from route with path params when using "." in nested route structure with trailingSlash: %s',
-    async (trailingSlash) => {
-      const tail = trailingSlash ? '/' : ''
-      const rootRoute = createRootRoute()
+    await act(() => fireEvent.click(homeBtn))
 
-      const IndexComponent = () => {
-        const navigate = useNavigate()
-        return (
-          <>
-            <h1 data-testid="index-heading">Index</h1>
-            <button
-              data-testid="posts-btn"
-              onClick={() => navigate({ to: '/posts' })}
-            >
-              Posts
-            </button>
-          </>
-        )
-      }
+    expect(router.state.location.pathname).toBe(`/`)
+    expect(router.state.location.search).toEqual({})
+  }
+)
 
-      const indexRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        path: '/',
-        component: IndexComponent,
-      })
+test.each([true, false])(
+  'should navigate to from route with path params when using "." in nested route structure with trailingSlash: %s',
+  async (trailingSlash) => {
+    const tail = trailingSlash ? '/' : ''
+    const rootRoute = createRootRoute()
 
-      const layoutRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        id: '_layout',
-        component: () => {
-          return (
-            <>
-              <h1>Layout</h1>
-              <Outlet />
-            </>
-          )
-        },
-      })
+    const IndexComponent = () => {
+      const navigate = useNavigate()
+      return (
+        <>
+          <h1 data-testid="index-heading">Index</h1>
+          <button
+            data-testid="posts-btn"
+            onClick={() => navigate({ to: '/posts' })}
+          >
+            Posts
+          </button>
+        </>
+      )
+    }
 
-      const PostsComponent = () => {
-        const navigate = postsRoute.useNavigate()
-        return (
-          <>
-            <h1 data-testid="posts-index-heading">Posts</h1>
-            <button
-              data-testid="first-post-btn"
-              onClick={() =>
-                navigate({
-                  to: '$postId',
-                  params: { postId: '1' },
-                })
-              }
-            >
-              To first post
-            </button>
-            <button
-              data-testid="second-post-btn"
-              onClick={() =>
-                navigate({
-                  to: '$postId',
-                  params: { postId: '2' },
-                })
-              }
-            >
-              To second post
-            </button>
-            <button
-              data-testid="to-posts-index-btn"
-              onClick={() =>
-                navigate({
-                  from: '/posts',
-                  to: '.',
-                })
-              }
-            >
-              To posts list
-            </button>
-            <Outlet />
-          </>
-        )
-      }
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+    })
 
-      const PostDetailComponent = () => {
-        const navigate = postDetailRoute.useNavigate()
+    const layoutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      id: '_layout',
+      component: () => {
         return (
           <>
-            <h1 data-testid="post-detail-index-heading">Post Detail</h1>
-            <button
-              data-testid="post-info-btn"
-              onClick={() =>
-                navigate({
-                  to: 'info',
-                })
-              }
-            >
-              To post info
-            </button>
-            <button
-              data-testid="post-notes-btn"
-              onClick={() =>
-                navigate({
-                  to: 'notes',
-                })
-              }
-            >
-              To post notes
-            </button>
-            <button
-              data-testid="to-post-detail-index-btn"
-              onClick={() =>
-                navigate({
-                  from: '/posts/$postId',
-                  to: '.',
-                })
-              }
-            >
-              To index detail options
-            </button>
+            <h1>Layout</h1>
             <Outlet />
           </>
         )
-      }
+      },
+    })
 
-      const PostInfoComponent = () => {
-        return (
-          <>
-            <h1 data-testid="post-info-heading">Post Info</h1>
-          </>
-        )
-      }
+    const PostsComponent = () => {
+      const navigate = postsRoute.useNavigate()
+      return (
+        <>
+          <h1 data-testid="posts-index-heading">Posts</h1>
+          <button
+            data-testid="first-post-btn"
+            onClick={() =>
+              navigate({
+                to: '$postId',
+                params: { postId: '1' },
+              })
+            }
+          >
+            To first post
+          </button>
+          <button
+            data-testid="second-post-btn"
+            onClick={() =>
+              navigate({
+                to: '$postId',
+                params: { postId: '2' },
+              })
+            }
+          >
+            To second post
+          </button>
+          <button
+            data-testid="to-posts-index-btn"
+            onClick={() =>
+              navigate({
+                from: '/posts',
+                to: '.',
+              })
+            }
+          >
+            To posts list
+          </button>
+          <Outlet />
+        </>
+      )
+    }
 
-      const PostNotesComponent = () => {
-        return (
-          <>
-            <h1 data-testid="post-notes-heading">Post Notes</h1>
-          </>
-        )
-      }
+    const PostDetailComponent = () => {
+      const navigate = postDetailRoute.useNavigate()
+      return (
+        <>
+          <h1 data-testid="post-detail-index-heading">Post Detail</h1>
+          <button
+            data-testid="post-info-btn"
+            onClick={() =>
+              navigate({
+                to: 'info',
+              })
+            }
+          >
+            To post info
+          </button>
+          <button
+            data-testid="post-notes-btn"
+            onClick={() =>
+              navigate({
+                to: 'notes',
+              })
+            }
+          >
+            To post notes
+          </button>
+          <button
+            data-testid="to-post-detail-index-btn"
+            onClick={() =>
+              navigate({
+                from: '/posts/$postId',
+                to: '.',
+              })
+            }
+          >
+            To index detail options
+          </button>
+          <Outlet />
+        </>
+      )
+    }
 
-      const postsRoute = createRoute({
-        getParentRoute: () => layoutRoute,
-        path: 'posts',
-        component: PostsComponent,
-      })
+    const PostInfoComponent = () => {
+      return (
+        <>
+          <h1 data-testid="post-info-heading">Post Info</h1>
+        </>
+      )
+    }
 
-      const postDetailRoute = createRoute({
-        getParentRoute: () => postsRoute,
-        path: '$postId',
-        component: PostDetailComponent,
-      })
+    const PostNotesComponent = () => {
+      return (
+        <>
+          <h1 data-testid="post-notes-heading">Post Notes</h1>
+        </>
+      )
+    }
 
-      const postInfoRoute = createRoute({
-        getParentRoute: () => postDetailRoute,
-        path: 'info',
-        component: PostInfoComponent,
-      })
+    const postsRoute = createRoute({
+      getParentRoute: () => layoutRoute,
+      path: 'posts',
+      component: PostsComponent,
+    })
 
-      const postNotesRoute = createRoute({
-        getParentRoute: () => postDetailRoute,
-        path: 'notes',
-        component: PostNotesComponent,
-      })
+    const postDetailRoute = createRoute({
+      getParentRoute: () => postsRoute,
+      path: '$postId',
+      component: PostDetailComponent,
+    })
 
-      const router = createRouter({
-        routeTree: rootRoute.addChildren([
-          indexRoute,
-          layoutRoute.addChildren([
-            postsRoute.addChildren([
-              postDetailRoute.addChildren([postInfoRoute, postNotesRoute]),
-            ]),
+    const postInfoRoute = createRoute({
+      getParentRoute: () => postDetailRoute,
+      path: 'info',
+      component: PostInfoComponent,
+    })
+
+    const postNotesRoute = createRoute({
+      getParentRoute: () => postDetailRoute,
+      path: 'notes',
+      component: PostNotesComponent,
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([
+        indexRoute,
+        layoutRoute.addChildren([
+          postsRoute.addChildren([
+            postDetailRoute.addChildren([postInfoRoute, postNotesRoute]),
           ]),
         ]),
-        trailingSlash: trailingSlash ? 'always' : 'never',
-      })
-
-      render(<RouterProvider router={router} />)
+      ]),
+      trailingSlash: trailingSlash ? 'always' : 'never',
+    })
 
-      const postsButton = await screen.findByTestId('posts-btn')
+    render(<RouterProvider router={router} />)
 
-      fireEvent.click(postsButton)
+    const postsButton = await screen.findByTestId('posts-btn')
 
-      expect(
-        await screen.findByTestId('posts-index-heading'),
-      ).toBeInTheDocument()
-      expect(window.location.pathname).toEqual(`/posts${tail}`)
+    fireEvent.click(postsButton)
 
-      const firstPostButton = await screen.findByTestId('first-post-btn')
+    expect(
+      await screen.findByTestId('posts-index-heading'),
+    ).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts${tail}`)
 
-      fireEvent.click(firstPostButton)
+    const firstPostButton = await screen.findByTestId('first-post-btn')
 
-      expect(
-        await screen.findByTestId('post-detail-index-heading'),
-      ).toBeInTheDocument()
-      expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+    fireEvent.click(firstPostButton)
 
-      const postInfoButton = await screen.findByTestId('post-info-btn')
+    expect(
+      await screen.findByTestId('post-detail-index-heading'),
+    ).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/1${tail}`)
 
-      fireEvent.click(postInfoButton)
+    const postInfoButton = await screen.findByTestId('post-info-btn')
 
-      expect(await screen.findByTestId('post-info-heading')).toBeInTheDocument()
-      expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
+    fireEvent.click(postInfoButton)
 
-      const toPostDetailIndexButton = await screen.findByTestId(
-        'to-post-detail-index-btn',
-      )
+    expect(await screen.findByTestId('post-info-heading')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
 
-      fireEvent.click(toPostDetailIndexButton)
+    const toPostDetailIndexButton = await screen.findByTestId(
+      'to-post-detail-index-btn',
+    )
 
-      expect(
-        await screen.findByTestId('post-detail-index-heading'),
-      ).toBeInTheDocument()
-      expect(screen.queryByTestId('post-info-heading')).not.toBeInTheDocument()
-      expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+    fireEvent.click(toPostDetailIndexButton)
 
-      const postNotesButton = await screen.findByTestId('post-notes-btn')
+    expect(
+      await screen.findByTestId('post-detail-index-heading'),
+    ).toBeInTheDocument()
+    expect(screen.queryByTestId('post-info-heading')).not.toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/1${tail}`)
 
-      fireEvent.click(postNotesButton)
+    const postNotesButton = await screen.findByTestId('post-notes-btn')
 
-      expect(
-        await screen.findByTestId('post-notes-heading'),
-      ).toBeInTheDocument()
-      expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
+    fireEvent.click(postNotesButton)
 
-      const toPostsIndexButton = await screen.findByTestId('to-posts-index-btn')
+    expect(
+      await screen.findByTestId('post-notes-heading'),
+    ).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
 
-      fireEvent.click(toPostsIndexButton)
+    const toPostsIndexButton = await screen.findByTestId('to-posts-index-btn')
 
-      expect(
-        await screen.findByTestId('posts-index-heading'),
-      ).toBeInTheDocument()
-      expect(screen.queryByTestId('post-notes-heading')).not.toBeInTheDocument()
-      expect(
-        screen.queryByTestId('post-detail-index-heading'),
-      ).not.toBeInTheDocument()
-      expect(window.location.pathname).toEqual(`/posts${tail}`)
+    fireEvent.click(toPostsIndexButton)
 
-      const secondPostButton = await screen.findByTestId('second-post-btn')
+    expect(
+      await screen.findByTestId('posts-index-heading'),
+    ).toBeInTheDocument()
+    expect(screen.queryByTestId('post-notes-heading')).not.toBeInTheDocument()
+    expect(
+      screen.queryByTestId('post-detail-index-heading'),
+    ).not.toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts${tail}`)
 
-      fireEvent.click(secondPostButton)
+    const secondPostButton = await screen.findByTestId('second-post-btn')
 
-      expect(
-        await screen.findByTestId('post-detail-index-heading'),
-      ).toBeInTheDocument()
-      expect(window.location.pathname).toEqual(`/posts/2${tail}`)
-    },
-  )
+    fireEvent.click(secondPostButton)
 
-  describe('when on /posts/$postId and navigating to ../ with default `from` /posts', () => {
-    async function runTest(navigateVia: 'Route' | 'RouteApi') {
-      const rootRoute = createRootRoute()
+    expect(
+      await screen.findByTestId('post-detail-index-heading'),
+    ).toBeInTheDocument()
+    expect(window.location.pathname).toEqual(`/posts/2${tail}`)
+  },
+)
 
-      const IndexComponent = () => {
-        const navigate = useNavigate()
-        return (
-          <>
-            <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>
-          </>
-        )
-      }
+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 IndexComponent = () => {
+      const navigate = useNavigate()
+      return (
+        <>
+          <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 layoutRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        id: '_layout',
-        component: () => {
-          return (
-            <>
-              <h1>Layout</h1>
-              <Outlet />
-            </>
-          )
-        },
-      })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+    })
 
-      const PostsComponent = () => {
-        const routeNavigate = postsRoute.useNavigate()
-        const routeApiNavigate = getRouteApi('/_layout/posts').useNavigate()
+    const layoutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      id: '_layout',
+      component: () => {
         return (
           <>
-            <h1>Posts</h1>
-            <button
-              data-testid="btn-to-home"
-              onClick={() => {
-                if (navigateVia === 'Route') {
-                  routeNavigate({ to: '../' })
-                } else {
-                  routeApiNavigate({ to: '../' })
-                }
-              }}
-            >
-              To Home
-            </button>
+            <h1>Layout</h1>
             <Outlet />
           </>
         )
-      }
+      },
+    })
 
-      const postsRoute = createRoute({
-        getParentRoute: () => layoutRoute,
-        path: 'posts',
-        component: PostsComponent,
-      })
+    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 PostComponent = () => {
-        const params = useParams({ strict: false })
-        return (
-          <>
-            <span>Params: {params.postId}</span>
-            <Outlet />
-          </>
-        )
-      }
+    const postsRoute = createRoute({
+      getParentRoute: () => layoutRoute,
+      path: 'posts',
+      component: PostsComponent,
+    })
 
-      const postRoute = createRoute({
-        getParentRoute: () => postsRoute,
-        path: '$postId',
-        component: PostComponent,
-      })
+    const PostComponent = () => {
+      const params = useParams({ strict: false })
+      return (
+        <>
+          <span>Params: {params.postId}</span>
+          <Outlet />
+        </>
+      )
+    }
 
-      const PostIndexComponent = () => {
-        return (
-          <>
-            <h1>Post Index</h1>
-          </>
-        )
-      }
+    const postRoute = createRoute({
+      getParentRoute: () => postsRoute,
+      path: '$postId',
+      component: PostComponent,
+    })
 
-      const postIndexRoute = createRoute({
-        getParentRoute: () => postRoute,
-        path: '/',
-        component: PostIndexComponent,
-      })
+    const PostIndexComponent = () => {
+      return (
+        <>
+          <h1>Post Index</h1>
+        </>
+      )
+    }
 
-      const DetailsComponent = () => {
-        return (
-          <>
-            <h1 data-testid="details-heading">Details!</h1>
-          </>
-        )
-      }
+    const postIndexRoute = createRoute({
+      getParentRoute: () => postRoute,
+      path: '/',
+      component: PostIndexComponent,
+    })
 
-      const detailsRoute = createRoute({
-        getParentRoute: () => postRoute,
-        path: 'details',
-        component: DetailsComponent,
-      })
+    const DetailsComponent = () => {
+      return (
+        <>
+          <h1 data-testid="details-heading">Details!</h1>
+        </>
+      )
+    }
 
-      const router = createRouter({
-        routeTree: rootRoute.addChildren([
-          indexRoute,
-          layoutRoute.addChildren([
-            postsRoute.addChildren([
-              postRoute.addChildren([postIndexRoute, detailsRoute]),
-            ]),
+    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'))
-  })
+  test('Route', () => runTest('Route'))
+  test('RouteApi', () => runTest('RouteApi'))
 })
 
 describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
@@ -2361,6 +2356,14 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
               >
                 Link to .. from /param/foo/a
               </button>
+              <button
+                onClick={() =>
+                  navigate({ to: '..' })
+                }
+                data-testid={'link-to-previous'}
+              >
+                Link to .. from current active route
+              </button>
               <Outlet />
             </>
           )
@@ -2511,6 +2514,26 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
       expect(window.location.pathname).toBe(`${basepath}/param/foo`)
     })
 
+    test('should navigate to a parent link based on active location', async () => {
+      const router = setupRouter()
+
+      render(<RouterProvider router={router} />)
+
+      await act(async () => {
+        history.push(`${basepath}/param/foo/a/b`)
+      })
+
+      const relativeLink = await screen.findByTestId('link-to-previous')
+
+      // Click the link and ensure the new location
+      await act(async () => {
+        fireEvent.click(relativeLink)
+      })
+
+      expect(window.location.pathname).toBe(`${basepath}/param/foo/a`)
+    })
+
+
     test('should navigate to same route with different params', async () => {
       const router = setupRouter()
 
diff --git a/packages/solid-router/tests/link.test.tsx b/packages/solid-router/tests/link.test.tsx
index f53c6d46baa..ae751d4386f 100644
--- a/packages/solid-router/tests/link.test.tsx
+++ b/packages/solid-router/tests/link.test.tsx
@@ -4591,950 +4591,972 @@ describe('search middleware', () => {
   })
 })
 
-describe('relative links to current route', () => {
-  test.each([true, false])(
-    'should navigate to current route when using "." in nested route structure from Index Route with trailingSlash: %s',
-    async (trailingSlash: boolean) => {
-      const tail = trailingSlash ? '/' : ''
-
+describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
+  'relative links with %s',
+  ({ basepath }) => {
+    const setupRouter = () => {
       const rootRoute = createRootRoute()
-
-      const IndexComponent = () => {
-        return (
-          <>
-            <Link data-testid="posts-link" to="/post">
-              Post
-            </Link>
-            <Link
-              data-testid="search-link"
-              to="."
-              search={{ param1: 'value1' }}
-            >
-              Search
-            </Link>
-            <Link
-              data-testid="search2-link"
-              to="."
-              search={{ param1: 'value2' }}
-            >
-              Search2
-            </Link>
-            <Outlet />
-          </>
-        )
-      }
-
       const indexRoute = createRoute({
         getParentRoute: () => rootRoute,
         path: '/',
-        component: IndexComponent,
-        validateSearch: z.object({
-          param1: z.string().optional(),
-        }),
+        component: () => {
+          return <h1>Index Route</h1>
+        },
+      })
+      const aRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: 'a',
+        component: () => {
+          return (
+            <>
+              <h1>A Route</h1>
+              <Outlet />
+            </>
+          )
+        },
       })
 
-      const postRoute = createRoute({
-        getParentRoute: () => indexRoute,
-        path: 'post',
-        component: () => (
-          <>
-            <div>Post</div>
-          </>
-        ),
+      const bRoute = createRoute({
+        getParentRoute: () => aRoute,
+        path: 'b',
+        component: () => {
+          return (
+            <>
+              <h1>B Route</h1>
+              <Link to="..">Link to Parent</Link>
+            </>
+          )
+        },
       })
 
-      const router = createRouter({
-        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
-        history,
-        trailingSlash: trailingSlash ? 'always' : 'never',
+      const paramRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: 'param/$param',
+        component: () => {
+          return (
+            <>
+              <h1>Param Route</h1>
+              <Link from={paramRoute.fullPath} to="./a">
+                Link to ./a
+              </Link>
+              <Link to="c" unsafeRelative="path">
+                Link to c
+              </Link>
+              <Link to="../c" unsafeRelative="path">
+                Link to ../c
+              </Link>
+              <Outlet />
+            </>
+          )
+        },
       })
 
-      render(() => <RouterProvider router={router} />)
+      const paramARoute = createRoute({
+        getParentRoute: () => paramRoute,
+        path: 'a',
+        component: () => {
+          return (
+            <>
+              <h1>Param A Route</h1>
+              <Link from={paramARoute.fullPath} to="..">
+                Link to .. from /param/foo/a
+              </Link>
+              <Link to=".." data-testid={'link-to-previous'}>
+                Link to .. from current active route
+              </Link>
+              <Outlet />
+            </>
+          )
+        },
+      })
 
-      const postButton = await screen.findByTestId('posts-link')
-      const searchButton = await screen.findByTestId('search-link')
-      const searchButton2 = await screen.findByTestId('search2-link')
+      const paramBRoute = createRoute({
+        getParentRoute: () => paramARoute,
+        path: 'b',
+        component: () => {
+          return (
+            <>
+              <h1>Param B Route</h1>
+              <Link to="..">Link to Parent</Link>
+              <Link to="." params={{ param: 'bar' }}>
+                Link to . with param:bar
+              </Link>
+              <Link to=".." params={{ param: 'bar' }}>
+                Link to Parent with param:bar
+              </Link>
+              <paramBRoute.Link
+                to=".."
+                params={(prev) => ({ ...prev, param: 'bar' })}
+              >
+                Link to Parent with param:bar functional
+              </paramBRoute.Link>
+            </>
+          )
+        },
+      })
 
-      fireEvent.click(postButton)
+      const paramCRoute = createRoute({
+        getParentRoute: () => paramARoute,
+        path: 'c',
+        component: () => {
+          return <h1>Param C Route</h1>
+        },
+      })
 
-      await waitFor(() => {
-        expect(window.location.pathname).toBe(`/post${tail}`)
+      const splatRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: 'splat/$',
+        component: () => {
+          return (
+            <>
+              <h1>Splat Route</h1>
+              <Link to=".." unsafeRelative="path">
+                Unsafe link to ..
+              </Link>
+              <Link to="." unsafeRelative="path">
+                Unsafe link to .
+              </Link>
+              <Link to="./child" unsafeRelative="path">
+                Unsafe link to ./child
+              </Link>
+            </>
+          )
+        },
       })
 
-      fireEvent.click(searchButton)
+      return createRouter({
+        routeTree: rootRoute.addChildren([
+          indexRoute,
+          aRoute.addChildren([bRoute]),
+          paramRoute.addChildren([
+            paramARoute.addChildren([paramBRoute, paramCRoute]),
+          ]),
+          splatRoute,
+        ]),
 
-      await waitFor(() => {
-        expect(router.state.location.pathname).toBe(`/post${tail}`)
-        expect(router.state.location.search).toEqual({ param1: 'value1' })
+        basepath: basepath === '' ? undefined : basepath,
       })
+    }
 
-      fireEvent.click(searchButton2)
+    test('should navigate to the parent route', async () => {
+      const router = setupRouter()
 
-      await waitFor(() => {
-        expect(router.state.location.pathname).toBe(`/post${tail}`)
-        expect(router.state.location.search).toEqual({ param1: 'value2' })
-      })
-    },
-  )
+      render(() => <RouterProvider router={router} />)
 
-  test.each([true, false])(
-    'should navigate to current route with search params when using "." in nested route structure from Index Route with trailingSlash: %s',
-    async (trailingSlash: boolean) => {
-      const tail = trailingSlash ? '/' : ''
+      // Navigate to /a/b
+      window.history.replaceState(null, 'root', `${basepath}/a/b`)
 
-      const rootRoute = createRootRoute()
+      // Inspect the link to go up a parent
+      const parentLink = await screen.findByText('Link to Parent')
+      expect(parentLink.getAttribute('href')).toBe(`${basepath}/a`)
 
-      const IndexComponent = () => {
-        return (
-          <>
-            <Link data-testid="posts-link" to="/post">
-              Post
-            </Link>
-            <Link
-              data-testid="search-link"
-              to="."
-              search={{ param1: 'value1' }}
-            >
-              Search
-            </Link>
-            <Link
-              data-testid="search2-link"
-              to="/post"
-              search={{ param1: 'value2' }}
-            >
-              Search2
-            </Link>
-            <Outlet />
-          </>
-        )
-      }
+      // Click the link and ensure the new location
+      fireEvent.click(parentLink)
 
-      const indexRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        path: '/',
-        component: IndexComponent,
-        validateSearch: z.object({
-          param1: z.string().optional(),
-        }),
-      })
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/a`),
+      )
+    })
 
-      const postRoute = createRoute({
-        getParentRoute: () => indexRoute,
-        path: 'post',
-        component: () => <div>Post</div>,
-      })
+    test('should navigate to the parent route and keep params', async () => {
+      const router = setupRouter()
 
-      const router = createRouter({
-        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
-        history,
-        trailingSlash: trailingSlash ? 'always' : 'never',
-      })
+      render(() => <RouterProvider router={router} />)
+
+      // Navigate to /param/oldParamValue/a/b
+      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
+
+      // Inspect the link to go up a parent and keep the params
+      const parentLink = await screen.findByText('Link to Parent')
+      expect(parentLink.getAttribute('href')).toBe(`${basepath}/param/foo/a`)
+
+      // Click the link and ensure the new location
+      fireEvent.click(parentLink)
+
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/param/foo/a`),
+      )
+    })
+
+    test('should navigate to the parent route and change params', async () => {
+      const router = setupRouter()
 
       render(() => <RouterProvider router={router} />)
 
-      const postButton = await screen.findByTestId('posts-link')
+      // Navigate to /param/oldParamValue/a/b
+      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
 
-      fireEvent.click(postButton)
+      // Inspect the link to go up a parent and keep the params
+      const parentLink = await screen.findByText(
+        'Link to Parent with param:bar',
+      )
+      expect(parentLink.getAttribute('href')).toBe(`${basepath}/param/bar/a`)
 
-      await waitFor(() => {
-        expect(window.location.pathname).toBe(`/post${tail}`)
-      })
+      // Click the link and ensure the new location
+      fireEvent.click(parentLink)
 
-      const searchButton = await screen.findByTestId('search-link')
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/param/bar/a`),
+      )
+    })
 
-      fireEvent.click(searchButton)
+    test('should navigate to a relative link based on render location', async () => {
+      const router = setupRouter()
 
-      await waitFor(() => {
-        expect(router.state.location.pathname).toBe(`/post${tail}`)
-        expect(router.state.location.search).toEqual({ param1: 'value1' })
-      })
+      render(() => <RouterProvider router={router} />)
 
-      const searchButton2 = await screen.findByTestId('search2-link')
+      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
 
-      fireEvent.click(searchButton2)
+      // Inspect the relative link to ./a
+      const relativeLink = await screen.findByText('Link to ./a')
+      expect(relativeLink.getAttribute('href')).toBe(`${basepath}/param/foo/a`)
 
-      await waitFor(() => {
-        expect(router.state.location.pathname).toBe(`/post${tail}`)
-        expect(router.state.location.search).toEqual({ param1: 'value2' })
-      })
-    },
-  )
+      // Click the link and ensure the new location
+      fireEvent.click(relativeLink)
 
-  test.each([true, false])(
-    'should navigate to current route with changing path params when using "." in nested route structure with trailingSlash: %s',
-    async (trailingSlash) => {
-      const tail = trailingSlash ? '/' : ''
-      const rootRoute = createRootRoute()
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/param/foo/a`),
+      )
+    })
 
-      const IndexComponent = () => {
-        return (
-          <>
-            <h1 data-testid="index-heading">Index</h1>
-            <Link data-testid="posts-link" to="/posts">
-              Posts
-            </Link>
-          </>
-        )
-      }
+    test('should navigate to a parent link based on render location', async () => {
+      const router = setupRouter()
 
-      const indexRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        path: '/',
-        component: IndexComponent,
-      })
+      render(() => <RouterProvider router={router} />)
 
-      const layoutRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        id: '_layout',
-        component: () => {
-          return (
-            <>
-              <h1>Layout</h1>
-              <Outlet />
-            </>
-          )
-        },
-      })
+      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
 
-      const PostsComponent = () => {
-        return (
-          <>
-            <h1 data-testid="posts-index-heading">Posts</h1>
-            <Link
-              data-testid="first-post-link"
-              to="$postId"
-              params={{ postId: 'id1' }}
-            >
-              To first post
-            </Link>
-            <Link
-              data-testid="second-post-link"
-              to="."
-              params={{ postId: 'id2' }}
-            >
-              To second post
-            </Link>
-            <Outlet />
-          </>
-        )
-      }
+      // Inspect the relative link to ./a
+      const relativeLink = await screen.findByText(
+        'Link to .. from /param/foo/a',
+      )
+      expect(relativeLink.getAttribute('href')).toBe(`${basepath}/param/foo`)
 
-      const postsRoute = createRoute({
-        getParentRoute: () => layoutRoute,
-        path: 'posts',
-        component: PostsComponent,
-      })
+      // Click the link and ensure the new location
+      fireEvent.click(relativeLink)
 
-      const PostComponent = () => {
-        const params = useParams({ strict: false })
-        return (
-          <>
-            <span data-testid={`post-${params().postId}`}>
-              Params: {params().postId}
-            </span>
-          </>
-        )
-      }
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/param/foo`),
+      )
+    })
 
-      const postRoute = createRoute({
-        getParentRoute: () => postsRoute,
-        path: '$postId',
-        component: PostComponent,
-      })
+    test('should navigate to a parent link based on active location', async () => {
+      const router = setupRouter()
 
-      const router = createRouter({
-        routeTree: rootRoute.addChildren([
-          indexRoute,
-          layoutRoute.addChildren([postsRoute.addChildren([postRoute])]),
-        ]),
-        trailingSlash: trailingSlash ? 'always' : 'never',
-      })
+      render(() => <RouterProvider router={router} />)
+
+      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
+
+      const relativeLink = await screen.findByTestId('link-to-previous')
+
+      expect(relativeLink.getAttribute('href')).toBe(`${basepath}/param/foo/a`)
+
+      // Click the link and ensure the new location
+      fireEvent.click(relativeLink)
+
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/param/foo/a`),
+      )
+    })
+
+    test('should navigate to a child link based on pathname', async () => {
+      const router = setupRouter()
+
+      render(() => <RouterProvider router={router} />)
+
+      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
+
+      // Inspect the relative link to ./a
+      const relativeLink = await screen.findByText('Link to c')
+      expect(relativeLink.getAttribute('href')).toBe(
+        `${basepath}/param/foo/a/b/c`,
+      )
+
+      // Click the link and ensure the new location
+      fireEvent.click(relativeLink)
+
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/param/foo/a/b/c`),
+      )
+    })
+
+    test('should navigate to a relative link based on pathname', async () => {
+      const router = setupRouter()
 
       render(() => <RouterProvider router={router} />)
 
-      const postsButton = await screen.findByTestId('posts-link')
+      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
 
-      fireEvent.click(postsButton)
+      // Inspect the relative link to ./a
+      const relativeLink = await screen.findByText('Link to ../c')
+      expect(relativeLink.getAttribute('href')).toBe(
+        `${basepath}/param/foo/a/c`,
+      )
 
-      await waitFor(() => {
-        expect(window.location.pathname).toEqual(`/posts${tail}`)
-      })
+      // Click the link and ensure the new location
+      fireEvent.click(relativeLink)
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/param/foo/a/c`),
+      )
+    })
 
-      const firstPostButton = await screen.findByTestId('first-post-link')
+    test('should navigate to parent inside of splat route based on pathname', async () => {
+      const router = setupRouter()
 
-      fireEvent.click(firstPostButton)
+      render(() => <RouterProvider router={router} />)
 
-      await waitFor(() => {
-        expect(window.location.pathname).toEqual(`/posts/id1${tail}`)
-      })
+      window.history.replaceState(null, 'root', `${basepath}/splat/a/b/c/d`)
 
-      const secondPostButton = await screen.findByTestId('second-post-link')
+      const relativeLink = await screen.findByText('Unsafe link to ..')
+      expect(relativeLink.getAttribute('href')).toBe(`${basepath}/splat/a/b/c`)
 
-      fireEvent.click(secondPostButton)
+      // Click the link and ensure the new location
+      fireEvent.click(relativeLink)
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/splat/a/b/c`),
+      )
+    })
 
-      await waitFor(() => {
-        expect(window.location.pathname).toEqual(`/posts/id2${tail}`)
-      })
-    },
-  )
-})
+    test('should navigate to same route inside of splat route based on pathname', async () => {
+      const router = setupRouter()
 
-describe('relative links to from route', () => {
-  test.each([true, false])(
-    'should navigate to from route when using "." in nested route structure from Index Route with trailingSlash: %s',
-    async (trailingSlash: boolean) => {
-      const tail = trailingSlash ? '/' : ''
+      window.history.replaceState(null, 'root', `${basepath}/splat/a/b/c`)
 
-      const rootRoute = createRootRoute()
+      render(() => <RouterProvider router={router} />)
 
-      const IndexComponent = () => {
-        return (
-          <>
-            <Link data-testid="posts-link" to="/post">
-              Post
-            </Link>
-            <Link
-              data-testid="search-link"
-              to="."
-              search={{ param1: 'value1' }}
-            >
-              Search
-            </Link>
-            <Link data-testid="home-link" from="/" to=".">
-              Go To Home
-            </Link>
-            <Outlet />
-          </>
-        )
-      }
+      const relativeLink = await screen.findByText('Unsafe link to .')
+      expect(relativeLink.getAttribute('href')).toBe(`${basepath}/splat/a/b/c`)
 
-      const indexRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        path: '/',
-        component: IndexComponent,
-        validateSearch: z.object({
-          param1: z.string().optional(),
-        }),
-      })
+      // Click the link and ensure the new location
+      fireEvent.click(relativeLink)
 
-      const postRoute = createRoute({
-        getParentRoute: () => indexRoute,
-        path: 'post',
-        component: () => <div>Post</div>,
-      })
+      expect(window.location.pathname).toBe(`${basepath}/splat/a/b/c`)
+    })
 
-      const router = createRouter({
-        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
-        history,
-        trailingSlash: trailingSlash ? 'always' : 'never',
-      })
+    test('should navigate to child route inside of splat route based on pathname', async () => {
+      const router = setupRouter()
 
-      render(() => <RouterProvider router={router} />)
+      window.history.replaceState(null, 'root', `${basepath}/splat/a/b/c`)
 
-      const postButton = await screen.findByTestId('posts-link')
+      render(() => <RouterProvider router={router} />)
 
-      fireEvent.click(postButton)
+      const relativeLink = await screen.findByText('Unsafe link to ./child')
+      expect(relativeLink.getAttribute('href')).toBe(
+        `${basepath}/splat/a/b/c/child`,
+      )
 
-      await waitFor(() => {
-        expect(router.state.location.pathname).toBe(`/post${tail}`)
-      })
+      // Click the link and ensure the new location
+      fireEvent.click(relativeLink)
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/splat/a/b/c/child`),
+      )
+    })
 
-      const searchButton = await screen.findByTestId('search-link')
+    test('should navigate to same route with different params', async () => {
+      const router = setupRouter()
 
-      fireEvent.click(searchButton)
+      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
 
-      await waitFor(() => {
-        expect(router.state.location.pathname).toBe(`/post${tail}`)
-        expect(router.state.location.search).toEqual({ param1: 'value1' })
-      })
+      render(() => <RouterProvider router={router} />)
 
-      const homeBtn = await screen.findByTestId('home-link')
+      const parentLink = await screen.findByText('Link to . with param:bar')
 
-      fireEvent.click(homeBtn)
+      fireEvent.click(parentLink)
 
-      await waitFor(() => {
-        expect(router.state.location.pathname).toBe(`/`)
-        expect(router.state.location.search).toEqual({})
-      })
-    },
-  )
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/param/bar/a/b`),
+      )
+    })
+  },
+)
 
+describe('relative links to current route', () => {
   test.each([true, false])(
-    'should navigate to from route with path params when using "." in nested route structure with trailingSlash: %s',
-    async (trailingSlash) => {
+    'should navigate to current route when using "." in nested route structure from Index Route with trailingSlash: %s',
+    async (trailingSlash: boolean) => {
       const tail = trailingSlash ? '/' : ''
+
       const rootRoute = createRootRoute()
 
       const IndexComponent = () => {
         return (
           <>
-            <h1 data-testid="index-heading">Index</h1>
-            <Link data-testid="posts-link" to="/posts">
-              Posts
-            </Link>
-          </>
-        )
-      }
-
-      const indexRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        path: '/',
-        component: IndexComponent,
-      })
-
-      const layoutRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        id: '_layout',
-        component: () => {
-          return (
-            <>
-              <h1>Layout</h1>
-              <Outlet />
-            </>
-          )
-        },
-      })
-
-      const PostsComponent = () => {
-        return (
-          <>
-            <h1 data-testid="posts-index-heading">Posts</h1>
-            <Link
-              data-testid="first-post-link"
-              to="$postId"
-              params={{ postId: '1' }}
-            >
-              To first post
+            <Link data-testid="posts-link" to="/post">
+              Post
             </Link>
             <Link
-              data-testid="second-post-link"
-              to="$postId"
-              params={{ postId: '2' }}
+              data-testid="search-link"
+              to="."
+              search={{ param1: 'value1' }}
             >
-              To second post
-            </Link>
-            <Link data-testid="to-posts-index-link" from="/posts" to=".">
-              To posts list
-            </Link>
-            <Outlet />
-          </>
-        )
-      }
-
-      const PostDetailComponent = () => {
-        return (
-          <>
-            <h1 data-testid="post-detail-index-heading">Post Detail</h1>
-            <Link data-testid="post-info-link" to="info">
-              To post info
-            </Link>
-            <Link data-testid="post-notes-link" to="notes">
-              To post notes
+              Search
             </Link>
             <Link
-              data-testid="to-post-detail-index-link"
-              from="/posts/$postId"
+              data-testid="search2-link"
               to="."
+              search={{ param1: 'value2' }}
             >
-              To index detail options
+              Search2
             </Link>
             <Outlet />
           </>
         )
       }
 
-      const PostInfoComponent = () => {
-        return (
-          <>
-            <h1 data-testid="post-info-heading">Post Info</h1>
-          </>
-        )
-      }
-
-      const PostNotesComponent = () => {
-        return (
-          <>
-            <h1 data-testid="post-notes-heading">Post Notes</h1>
-          </>
-        )
-      }
-
-      const postsRoute = createRoute({
-        getParentRoute: () => layoutRoute,
-        path: 'posts',
-        component: PostsComponent,
-      })
-
-      const postDetailRoute = createRoute({
-        getParentRoute: () => postsRoute,
-        path: '$postId',
-        component: PostDetailComponent,
-      })
-
-      const postInfoRoute = createRoute({
-        getParentRoute: () => postDetailRoute,
-        path: 'info',
-        component: PostInfoComponent,
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+        validateSearch: z.object({
+          param1: z.string().optional(),
+        }),
       })
 
-      const postNotesRoute = createRoute({
-        getParentRoute: () => postDetailRoute,
-        path: 'notes',
-        component: PostNotesComponent,
+      const postRoute = createRoute({
+        getParentRoute: () => indexRoute,
+        path: 'post',
+        component: () => (
+          <>
+            <div>Post</div>
+          </>
+        ),
       })
 
       const router = createRouter({
-        routeTree: rootRoute.addChildren([
-          indexRoute,
-          layoutRoute.addChildren([
-            postsRoute.addChildren([
-              postDetailRoute.addChildren([postInfoRoute, postNotesRoute]),
-            ]),
-          ]),
-        ]),
+        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+        history,
         trailingSlash: trailingSlash ? 'always' : 'never',
       })
 
       render(() => <RouterProvider router={router} />)
 
-      const postsButton = await screen.findByTestId('posts-link')
+      const postButton = await screen.findByTestId('posts-link')
+      const searchButton = await screen.findByTestId('search-link')
+      const searchButton2 = await screen.findByTestId('search2-link')
 
-      fireEvent.click(postsButton)
+      fireEvent.click(postButton)
 
       await waitFor(() => {
-        expect(screen.queryByTestId('posts-index-heading')).toBeInTheDocument()
-        expect(window.location.pathname).toEqual(`/posts${tail}`)
+        expect(window.location.pathname).toBe(`/post${tail}`)
       })
 
-      const firstPostButton = await screen.findByTestId('first-post-link')
-
-      fireEvent.click(firstPostButton)
+      fireEvent.click(searchButton)
 
       await waitFor(() => {
-        expect(
-          screen.queryByTestId('post-detail-index-heading'),
-        ).toBeInTheDocument()
-        expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+        expect(router.state.location.search).toEqual({ param1: 'value1' })
       })
 
-      const postInfoButton = await screen.findByTestId('post-info-link')
-
-      fireEvent.click(postInfoButton)
+      fireEvent.click(searchButton2)
 
       await waitFor(() => {
-        expect(screen.queryByTestId('post-info-heading')).toBeInTheDocument()
-        expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+        expect(router.state.location.search).toEqual({ param1: 'value2' })
       })
+    },
+  )
 
-      const toPostDetailIndexButton = await screen.findByTestId(
-        'to-post-detail-index-link',
-      )
+  test.each([true, false])(
+    'should navigate to current route with search params when using "." in nested route structure from Index Route with trailingSlash: %s',
+    async (trailingSlash: boolean) => {
+      const tail = trailingSlash ? '/' : ''
 
-      fireEvent.click(toPostDetailIndexButton)
+      const rootRoute = createRootRoute()
 
-      await waitFor(() => {
-        expect(
-          screen.queryByTestId('post-detail-index-heading'),
-        ).toBeInTheDocument()
-        expect(
-          screen.queryByTestId('post-info-heading'),
-        ).not.toBeInTheDocument()
-        expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+      const IndexComponent = () => {
+        return (
+          <>
+            <Link data-testid="posts-link" to="/post">
+              Post
+            </Link>
+            <Link
+              data-testid="search-link"
+              to="."
+              search={{ param1: 'value1' }}
+            >
+              Search
+            </Link>
+            <Link
+              data-testid="search2-link"
+              to="/post"
+              search={{ param1: 'value2' }}
+            >
+              Search2
+            </Link>
+            <Outlet />
+          </>
+        )
+      }
+
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+        validateSearch: z.object({
+          param1: z.string().optional(),
+        }),
       })
 
-      const postNotesButton = await screen.findByTestId('post-notes-link')
+      const postRoute = createRoute({
+        getParentRoute: () => indexRoute,
+        path: 'post',
+        component: () => <div>Post</div>,
+      })
 
-      fireEvent.click(postNotesButton)
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+        history,
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
+
+      render(() => <RouterProvider router={router} />)
+
+      const postButton = await screen.findByTestId('posts-link')
+
+      fireEvent.click(postButton)
 
       await waitFor(() => {
-        expect(screen.queryByTestId('post-notes-heading')).toBeInTheDocument()
-        expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
+        expect(window.location.pathname).toBe(`/post${tail}`)
       })
 
-      const toPostsIndexButton = await screen.findByTestId(
-        'to-posts-index-link',
-      )
+      const searchButton = await screen.findByTestId('search-link')
 
-      fireEvent.click(toPostsIndexButton)
+      fireEvent.click(searchButton)
 
       await waitFor(() => {
-        expect(screen.queryByTestId('posts-index-heading')).toBeInTheDocument()
-        expect(
-          screen.queryByTestId('post-notes-heading'),
-        ).not.toBeInTheDocument()
-        expect(
-          screen.queryByTestId('post-detail-index-heading'),
-        ).not.toBeInTheDocument()
-        expect(window.location.pathname).toEqual(`/posts${tail}`)
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+        expect(router.state.location.search).toEqual({ param1: 'value1' })
       })
 
-      const secondPostButton = await screen.findByTestId('second-post-link')
+      const searchButton2 = await screen.findByTestId('search2-link')
 
-      fireEvent.click(secondPostButton)
+      fireEvent.click(searchButton2)
 
       await waitFor(() => {
-        expect(
-          screen.queryByTestId('post-detail-index-heading'),
-        ).toBeInTheDocument()
-        expect(window.location.pathname).toEqual(`/posts/2${tail}`)
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+        expect(router.state.location.search).toEqual({ param1: 'value2' })
       })
     },
   )
-})
 
-describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
-  'relative links with %s',
-  ({ basepath }) => {
-    const setupRouter = () => {
+  test.each([true, false])(
+    'should navigate to current route with changing path params when using "." in nested route structure with trailingSlash: %s',
+    async (trailingSlash) => {
+      const tail = trailingSlash ? '/' : ''
       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: () => {
-          return (
-            <>
-              <h1>B Route</h1>
-              <Link to="..">Link to Parent</Link>
-            </>
-          )
-        },
-      })
-
-      const paramRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        path: 'param/$param',
-        component: () => {
-          return (
-            <>
-              <h1>Param Route</h1>
-              <Link from={paramRoute.fullPath} to="./a">
-                Link to ./a
-              </Link>
-              <Link to="c" unsafeRelative="path">
-                Link to c
-              </Link>
-              <Link to="../c" unsafeRelative="path">
-                Link to ../c
-              </Link>
-              <Outlet />
-            </>
-          )
-        },
-      })
-
-      const paramARoute = createRoute({
-        getParentRoute: () => paramRoute,
-        path: 'a',
-        component: () => {
-          return (
-            <>
-              <h1>Param A Route</h1>
-              <Link from={paramARoute.fullPath} to="..">
-                Link to .. from /param/foo/a
-              </Link>
-              <Outlet />
-            </>
-          )
-        },
-      })
 
-      const paramBRoute = createRoute({
-        getParentRoute: () => paramARoute,
-        path: 'b',
-        component: () => {
-          return (
-            <>
-              <h1>Param B Route</h1>
-              <Link to="..">Link to Parent</Link>
-              <Link to="." params={{ param: 'bar' }}>
-                Link to . with param:bar
-              </Link>
-              <Link to=".." params={{ param: 'bar' }}>
-                Link to Parent with param:bar
-              </Link>
-              <paramBRoute.Link
-                to=".."
-                params={(prev) => ({ ...prev, param: 'bar' })}
-              >
-                Link to Parent with param:bar functional
-              </paramBRoute.Link>
-            </>
-          )
-        },
-      })
+      const IndexComponent = () => {
+        return (
+          <>
+            <h1 data-testid="index-heading">Index</h1>
+            <Link data-testid="posts-link" to="/posts">
+              Posts
+            </Link>
+          </>
+        )
+      }
 
-      const paramCRoute = createRoute({
-        getParentRoute: () => paramARoute,
-        path: 'c',
-        component: () => {
-          return <h1>Param C Route</h1>
-        },
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
       })
 
-      const splatRoute = createRoute({
+      const layoutRoute = createRoute({
         getParentRoute: () => rootRoute,
-        path: 'splat/$',
+        id: '_layout',
         component: () => {
           return (
             <>
-              <h1>Splat Route</h1>
-              <Link to=".." unsafeRelative="path">
-                Unsafe link to ..
-              </Link>
-              <Link to="." unsafeRelative="path">
-                Unsafe link to .
-              </Link>
-              <Link to="./child" unsafeRelative="path">
-                Unsafe link to ./child
-              </Link>
+              <h1>Layout</h1>
+              <Outlet />
             </>
           )
         },
       })
 
-      return createRouter({
+      const PostsComponent = () => {
+        return (
+          <>
+            <h1 data-testid="posts-index-heading">Posts</h1>
+            <Link
+              data-testid="first-post-link"
+              to="$postId"
+              params={{ postId: 'id1' }}
+            >
+              To first post
+            </Link>
+            <Link
+              data-testid="second-post-link"
+              to="."
+              params={{ postId: 'id2' }}
+            >
+              To second post
+            </Link>
+            <Outlet />
+          </>
+        )
+      }
+
+      const postsRoute = createRoute({
+        getParentRoute: () => layoutRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
+
+      const PostComponent = () => {
+        const params = useParams({ strict: false })
+        return (
+          <>
+            <span data-testid={`post-${params().postId}`}>
+              Params: {params().postId}
+            </span>
+          </>
+        )
+      }
+
+      const postRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostComponent,
+      })
+
+      const router = createRouter({
         routeTree: rootRoute.addChildren([
           indexRoute,
-          aRoute.addChildren([bRoute]),
-          paramRoute.addChildren([
-            paramARoute.addChildren([paramBRoute, paramCRoute]),
-          ]),
-          splatRoute,
+          layoutRoute.addChildren([postsRoute.addChildren([postRoute])]),
         ]),
-
-        basepath: basepath === '' ? undefined : basepath,
+        trailingSlash: trailingSlash ? 'always' : 'never',
       })
-    }
-
-    test('should navigate to the parent route', async () => {
-      const router = setupRouter()
 
       render(() => <RouterProvider router={router} />)
 
-      // Navigate to /a/b
-      window.history.replaceState(null, 'root', `${basepath}/a/b`)
+      const postsButton = await screen.findByTestId('posts-link')
 
-      // Inspect the link to go up a parent
-      const parentLink = await screen.findByText('Link to Parent')
-      expect(parentLink.getAttribute('href')).toBe(`${basepath}/a`)
+      fireEvent.click(postsButton)
 
-      // Click the link and ensure the new location
-      fireEvent.click(parentLink)
+      await waitFor(() => {
+        expect(window.location.pathname).toEqual(`/posts${tail}`)
+      })
 
-      await waitFor(() =>
-        expect(window.location.pathname).toBe(`${basepath}/a`),
-      )
-    })
+      const firstPostButton = await screen.findByTestId('first-post-link')
 
-    test('should navigate to the parent route and keep params', async () => {
-      const router = setupRouter()
+      fireEvent.click(firstPostButton)
 
-      render(() => <RouterProvider router={router} />)
+      await waitFor(() => {
+        expect(window.location.pathname).toEqual(`/posts/id1${tail}`)
+      })
 
-      // Navigate to /param/oldParamValue/a/b
-      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
+      const secondPostButton = await screen.findByTestId('second-post-link')
 
-      // Inspect the link to go up a parent and keep the params
-      const parentLink = await screen.findByText('Link to Parent')
-      expect(parentLink.getAttribute('href')).toBe(`${basepath}/param/foo/a`)
+      fireEvent.click(secondPostButton)
 
-      // Click the link and ensure the new location
-      fireEvent.click(parentLink)
+      await waitFor(() => {
+        expect(window.location.pathname).toEqual(`/posts/id2${tail}`)
+      })
+    },
+  )
+})
 
-      await waitFor(() =>
-        expect(window.location.pathname).toBe(`${basepath}/param/foo/a`),
-      )
-    })
+describe('relative links to from route', () => {
+  test.each([true, false])(
+    'should navigate to from route when using "." in nested route structure from Index Route with trailingSlash: %s',
+    async (trailingSlash: boolean) => {
+      const tail = trailingSlash ? '/' : ''
 
-    test('should navigate to the parent route and change params', async () => {
-      const router = setupRouter()
+      const rootRoute = createRootRoute()
 
-      render(() => <RouterProvider router={router} />)
+      const IndexComponent = () => {
+        return (
+          <>
+            <Link data-testid="posts-link" to="/post">
+              Post
+            </Link>
+            <Link
+              data-testid="search-link"
+              to="."
+              search={{ param1: 'value1' }}
+            >
+              Search
+            </Link>
+            <Link data-testid="home-link" from="/" to=".">
+              Go To Home
+            </Link>
+            <Outlet />
+          </>
+        )
+      }
 
-      // Navigate to /param/oldParamValue/a/b
-      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+        validateSearch: z.object({
+          param1: z.string().optional(),
+        }),
+      })
 
-      // Inspect the link to go up a parent and keep the params
-      const parentLink = await screen.findByText(
-        'Link to Parent with param:bar',
-      )
-      expect(parentLink.getAttribute('href')).toBe(`${basepath}/param/bar/a`)
+      const postRoute = createRoute({
+        getParentRoute: () => indexRoute,
+        path: 'post',
+        component: () => <div>Post</div>,
+      })
 
-      // Click the link and ensure the new location
-      fireEvent.click(parentLink)
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+        history,
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
 
-      await waitFor(() =>
-        expect(window.location.pathname).toBe(`${basepath}/param/bar/a`),
-      )
-    })
+      render(() => <RouterProvider router={router} />)
 
-    test('should navigate to a relative link based on render location', async () => {
-      const router = setupRouter()
+      const postButton = await screen.findByTestId('posts-link')
 
-      render(() => <RouterProvider router={router} />)
+      fireEvent.click(postButton)
 
-      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+      })
 
-      // Inspect the relative link to ./a
-      const relativeLink = await screen.findByText('Link to ./a')
-      expect(relativeLink.getAttribute('href')).toBe(`${basepath}/param/foo/a`)
+      const searchButton = await screen.findByTestId('search-link')
 
-      // Click the link and ensure the new location
-      fireEvent.click(relativeLink)
+      fireEvent.click(searchButton)
 
-      await waitFor(() =>
-        expect(window.location.pathname).toBe(`${basepath}/param/foo/a`),
-      )
-    })
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+        expect(router.state.location.search).toEqual({ param1: 'value1' })
+      })
 
-    test('should navigate to a parent link based on render location', async () => {
-      const router = setupRouter()
+      const homeBtn = await screen.findByTestId('home-link')
 
-      render(() => <RouterProvider router={router} />)
+      fireEvent.click(homeBtn)
 
-      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/`)
+        expect(router.state.location.search).toEqual({})
+      })
+    },
+  )
 
-      // Inspect the relative link to ./a
-      const relativeLink = await screen.findByText(
-        'Link to .. from /param/foo/a',
-      )
-      expect(relativeLink.getAttribute('href')).toBe(`${basepath}/param/foo`)
+  test.each([true, false])(
+    'should navigate to from route with path params when using "." in nested route structure with trailingSlash: %s',
+    async (trailingSlash) => {
+      const tail = trailingSlash ? '/' : ''
+      const rootRoute = createRootRoute()
 
-      // Click the link and ensure the new location
-      fireEvent.click(relativeLink)
+      const IndexComponent = () => {
+        return (
+          <>
+            <h1 data-testid="index-heading">Index</h1>
+            <Link data-testid="posts-link" to="/posts">
+              Posts
+            </Link>
+          </>
+        )
+      }
 
-      await waitFor(() =>
-        expect(window.location.pathname).toBe(`${basepath}/param/foo`),
-      )
-    })
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+      })
 
-    test('should navigate to a child link based on pathname', async () => {
-      const router = setupRouter()
+      const layoutRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        id: '_layout',
+        component: () => {
+          return (
+            <>
+              <h1>Layout</h1>
+              <Outlet />
+            </>
+          )
+        },
+      })
 
-      render(() => <RouterProvider router={router} />)
+      const PostsComponent = () => {
+        return (
+          <>
+            <h1 data-testid="posts-index-heading">Posts</h1>
+            <Link
+              data-testid="first-post-link"
+              to="$postId"
+              params={{ postId: '1' }}
+            >
+              To first post
+            </Link>
+            <Link
+              data-testid="second-post-link"
+              to="$postId"
+              params={{ postId: '2' }}
+            >
+              To second post
+            </Link>
+            <Link data-testid="to-posts-index-link" from="/posts" to=".">
+              To posts list
+            </Link>
+            <Outlet />
+          </>
+        )
+      }
 
-      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
+      const PostDetailComponent = () => {
+        return (
+          <>
+            <h1 data-testid="post-detail-index-heading">Post Detail</h1>
+            <Link data-testid="post-info-link" to="info">
+              To post info
+            </Link>
+            <Link data-testid="post-notes-link" to="notes">
+              To post notes
+            </Link>
+            <Link
+              data-testid="to-post-detail-index-link"
+              from="/posts/$postId"
+              to="."
+            >
+              To index detail options
+            </Link>
+            <Outlet />
+          </>
+        )
+      }
 
-      // Inspect the relative link to ./a
-      const relativeLink = await screen.findByText('Link to c')
-      expect(relativeLink.getAttribute('href')).toBe(
-        `${basepath}/param/foo/a/b/c`,
-      )
+      const PostInfoComponent = () => {
+        return (
+          <>
+            <h1 data-testid="post-info-heading">Post Info</h1>
+          </>
+        )
+      }
 
-      // Click the link and ensure the new location
-      fireEvent.click(relativeLink)
+      const PostNotesComponent = () => {
+        return (
+          <>
+            <h1 data-testid="post-notes-heading">Post Notes</h1>
+          </>
+        )
+      }
 
-      await waitFor(() =>
-        expect(window.location.pathname).toBe(`${basepath}/param/foo/a/b/c`),
-      )
-    })
+      const postsRoute = createRoute({
+        getParentRoute: () => layoutRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
 
-    test('should navigate to a relative link based on pathname', async () => {
-      const router = setupRouter()
+      const postDetailRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostDetailComponent,
+      })
 
-      render(() => <RouterProvider router={router} />)
+      const postInfoRoute = createRoute({
+        getParentRoute: () => postDetailRoute,
+        path: 'info',
+        component: PostInfoComponent,
+      })
 
-      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
+      const postNotesRoute = createRoute({
+        getParentRoute: () => postDetailRoute,
+        path: 'notes',
+        component: PostNotesComponent,
+      })
 
-      // Inspect the relative link to ./a
-      const relativeLink = await screen.findByText('Link to ../c')
-      expect(relativeLink.getAttribute('href')).toBe(
-        `${basepath}/param/foo/a/c`,
-      )
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([
+          indexRoute,
+          layoutRoute.addChildren([
+            postsRoute.addChildren([
+              postDetailRoute.addChildren([postInfoRoute, postNotesRoute]),
+            ]),
+          ]),
+        ]),
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
 
-      // Click the link and ensure the new location
-      fireEvent.click(relativeLink)
-      await waitFor(() =>
-        expect(window.location.pathname).toBe(`${basepath}/param/foo/a/c`),
-      )
-    })
+      render(() => <RouterProvider router={router} />)
 
-    test('should navigate to parent inside of splat route based on pathname', async () => {
-      const router = setupRouter()
+      const postsButton = await screen.findByTestId('posts-link')
 
-      render(() => <RouterProvider router={router} />)
+      fireEvent.click(postsButton)
 
-      window.history.replaceState(null, 'root', `${basepath}/splat/a/b/c/d`)
+      await waitFor(() => {
+        expect(screen.queryByTestId('posts-index-heading')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts${tail}`)
+      })
 
-      const relativeLink = await screen.findByText('Unsafe link to ..')
-      expect(relativeLink.getAttribute('href')).toBe(`${basepath}/splat/a/b/c`)
+      const firstPostButton = await screen.findByTestId('first-post-link')
 
-      // Click the link and ensure the new location
-      fireEvent.click(relativeLink)
-      await waitFor(() =>
-        expect(window.location.pathname).toBe(`${basepath}/splat/a/b/c`),
-      )
-    })
+      fireEvent.click(firstPostButton)
 
-    test('should navigate to same route inside of splat route based on pathname', async () => {
-      const router = setupRouter()
+      await waitFor(() => {
+        expect(
+          screen.queryByTestId('post-detail-index-heading'),
+        ).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+      })
 
-      window.history.replaceState(null, 'root', `${basepath}/splat/a/b/c`)
+      const postInfoButton = await screen.findByTestId('post-info-link')
 
-      render(() => <RouterProvider router={router} />)
+      fireEvent.click(postInfoButton)
 
-      const relativeLink = await screen.findByText('Unsafe link to .')
-      expect(relativeLink.getAttribute('href')).toBe(`${basepath}/splat/a/b/c`)
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-info-heading')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/1/info${tail}`)
+      })
 
-      // Click the link and ensure the new location
-      fireEvent.click(relativeLink)
+      const toPostDetailIndexButton = await screen.findByTestId(
+        'to-post-detail-index-link',
+      )
 
-      expect(window.location.pathname).toBe(`${basepath}/splat/a/b/c`)
-    })
+      fireEvent.click(toPostDetailIndexButton)
 
-    test('should navigate to child route inside of splat route based on pathname', async () => {
-      const router = setupRouter()
+      await waitFor(() => {
+        expect(
+          screen.queryByTestId('post-detail-index-heading'),
+        ).toBeInTheDocument()
+        expect(
+          screen.queryByTestId('post-info-heading'),
+        ).not.toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/1${tail}`)
+      })
 
-      window.history.replaceState(null, 'root', `${basepath}/splat/a/b/c`)
+      const postNotesButton = await screen.findByTestId('post-notes-link')
 
-      render(() => <RouterProvider router={router} />)
+      fireEvent.click(postNotesButton)
 
-      const relativeLink = await screen.findByText('Unsafe link to ./child')
-      expect(relativeLink.getAttribute('href')).toBe(
-        `${basepath}/splat/a/b/c/child`,
-      )
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-notes-heading')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
+      })
 
-      // Click the link and ensure the new location
-      fireEvent.click(relativeLink)
-      await waitFor(() =>
-        expect(window.location.pathname).toBe(`${basepath}/splat/a/b/c/child`),
+      const toPostsIndexButton = await screen.findByTestId(
+        'to-posts-index-link',
       )
-    })
-
-    test('should navigate to same route with different params', async () => {
-      const router = setupRouter()
 
-      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
+      fireEvent.click(toPostsIndexButton)
 
-      render(() => <RouterProvider router={router} />)
+      await waitFor(() => {
+        expect(screen.queryByTestId('posts-index-heading')).toBeInTheDocument()
+        expect(
+          screen.queryByTestId('post-notes-heading'),
+        ).not.toBeInTheDocument()
+        expect(
+          screen.queryByTestId('post-detail-index-heading'),
+        ).not.toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts${tail}`)
+      })
 
-      const parentLink = await screen.findByText('Link to . with param:bar')
+      const secondPostButton = await screen.findByTestId('second-post-link')
 
-      fireEvent.click(parentLink)
+      fireEvent.click(secondPostButton)
 
-      await waitFor(() =>
-        expect(window.location.pathname).toBe(`${basepath}/param/bar/a/b`),
-      )
-    })
-  },
-)
+      await waitFor(() => {
+        expect(
+          screen.queryByTestId('post-detail-index-heading'),
+        ).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/2${tail}`)
+      })
+    },
+  )
+})
diff --git a/packages/solid-router/tests/useNavigate.test.tsx b/packages/solid-router/tests/useNavigate.test.tsx
index 5d22b0adb76..d4d15eed1a6 100644
--- a/packages/solid-router/tests/useNavigate.test.tsx
+++ b/packages/solid-router/tests/useNavigate.test.tsx
@@ -1320,301 +1320,711 @@ test('when setting search params with 2 parallel navigate calls', async () => {
   expect(search.get('param2')).toEqual('bar')
 })
 
-describe('relative navigate to current route', () => {
-  test.each([true, false])(
-    'should navigate to current route with search params when using "." in nested route structure from Index Route with trailingSlash: %s',
-    async (trailingSlash: boolean) => {
-      const tail = trailingSlash ? '/' : ''
+describe('when on /posts/$postId and navigating to ../ with default `from` /posts', () => {
+  async function runTest(navigateVia: 'Route' | 'RouteApi') {
+    const rootRoute = createRootRoute()
 
-      const rootRoute = createRootRoute()
+    const IndexComponent = () => {
+      const navigate = useNavigate()
+      return (
+        <>
+          <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 IndexComponent = () => {
-        const navigate = useNavigate()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: IndexComponent,
+    })
+
+    const layoutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      id: '_layout',
+      component: () => {
         return (
           <>
-            <button
-              data-testid="posts-btn"
-              onClick={() => {
-                navigate({
-                  to: '/post',
-                })
-              }}
-            >
-              Post
-            </button>
-            <button
-              data-testid="search-btn"
-              onClick={() =>
-                navigate({
-                  to: '.',
-                  search: {
-                    param1: 'value1',
-                  },
-                })
-              }
-            >
-              Search
-            </button>
-            <button
-              data-testid="search2-btn"
-              onClick={() =>
-                navigate({
-                  to: '/post',
-                  search: {
-                    param1: 'value2',
-                  },
-                })
-              }
-            >
-              Search2
-            </button>
+            <h1>Layout</h1>
             <Outlet />
           </>
         )
-      }
+      },
+    })
 
-      const indexRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        path: '/',
-        component: IndexComponent,
-        validateSearch: z.object({
-          param1: z.string().optional(),
-        }),
-      })
+    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 postRoute = createRoute({
-        getParentRoute: () => indexRoute,
-        path: 'post',
-        component: () => <div>Post</div>,
-      })
+    const postsRoute = createRoute({
+      getParentRoute: () => layoutRoute,
+      path: 'posts',
+      component: PostsComponent,
+    })
 
-      const router = createRouter({
-        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
-        history,
-        trailingSlash: trailingSlash ? 'always' : 'never',
-      })
+    const PostComponent = () => {
+      const params = useParams({ strict: false })
+      return (
+        <>
+          <span>Params: {params().postId}</span>
+          <Outlet />
+        </>
+      )
+    }
 
-      render(() => <RouterProvider router={router} />)
+    const postRoute = createRoute({
+      getParentRoute: () => postsRoute,
+      path: '$postId',
+      component: PostComponent,
+    })
 
-      const postButton = await screen.findByTestId('posts-btn')
+    const PostIndexComponent = () => {
+      return (
+        <>
+          <h1>Post Index</h1>
+        </>
+      )
+    }
 
-      fireEvent.click(postButton)
+    const postIndexRoute = createRoute({
+      getParentRoute: () => postRoute,
+      path: '/',
+      component: PostIndexComponent,
+    })
 
-      await waitFor(() => {
-        expect(router.state.location.pathname).toBe(`/post${tail}`)
-      })
+    const DetailsComponent = () => {
+      return (
+        <>
+          <h1 data-testid="details-heading">Details!</h1>
+        </>
+      )
+    }
 
-      const searchButton = await screen.findByTestId('search-btn')
+    const detailsRoute = createRoute({
+      getParentRoute: () => postRoute,
+      path: 'details',
+      component: DetailsComponent,
+    })
 
-      fireEvent.click(searchButton)
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([
+        indexRoute,
+        layoutRoute.addChildren([
+          postsRoute.addChildren([
+            postRoute.addChildren([postIndexRoute, detailsRoute]),
+          ]),
+        ]),
+      ]),
+    })
 
-      await waitFor(() => {
-        expect(router.state.location.pathname).toBe(`/post${tail}`)
-        expect(router.state.location.search).toEqual({ param1: 'value1' })
-      })
+    render(() => <RouterProvider router={router} />)
 
-      const searchButton2 = await screen.findByTestId('search2-btn')
+    const postsButton = await screen.findByTestId('index-to-first-post-btn')
 
-      fireEvent.click(searchButton2)
+    fireEvent.click(postsButton)
 
-      await waitFor(() => {
-        expect(router.state.location.pathname).toBe(`/post${tail}`)
-        expect(router.state.location.search).toEqual({ param1: 'value2' })
-      })
-    },
-  )
+    expect(await screen.findByTestId('details-heading')).toBeInTheDocument()
 
-  test.each([true, false])(
-    'should navigate to current route with changing path params when using "." in nested route structure with trailingSlash: %s',
-    async (trailingSlash) => {
-      const tail = trailingSlash ? '/' : ''
-      const rootRoute = createRootRoute()
+    expect(window.location.pathname).toEqual('/posts/id1/details')
 
-      const IndexComponent = () => {
-        const navigate = useNavigate()
-        return (
-          <>
-            <h1 data-testid="index-heading">Index</h1>
-            <button
-              data-testid="posts-btn"
-              onClick={() => navigate({ to: '/posts' })}
-            >
-              Posts
-            </button>
-          </>
-        )
-      }
+    const homeButton = await screen.findByTestId('btn-to-home')
+
+    fireEvent.click(homeButton)
+
+    expect(await screen.findByTestId('index-heading')).toBeInTheDocument()
+    expect(window.location.pathname).toEqual('/')
+  }
 
+  test('Route', () => runTest('Route'))
+  test('RouteApi', () => runTest('RouteApi'))
+})
+
+describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
+  'relative useNavigate with %s',
+  ({ basepath }) => {
+    const setupRouter = () => {
+      const rootRoute = createRootRoute()
       const indexRoute = createRoute({
         getParentRoute: () => rootRoute,
         path: '/',
-        component: IndexComponent,
+        component: () => {
+          return <h1>Index Route</h1>
+        },
       })
-
-      const layoutRoute = createRoute({
+      const aRoute = createRoute({
         getParentRoute: () => rootRoute,
-        id: '_layout',
+        path: 'a',
         component: () => {
           return (
             <>
-              <h1>Layout</h1>
+              <h1>A Route</h1>
               <Outlet />
             </>
           )
         },
       })
 
-      const PostsComponent = () => {
-        const navigate = useNavigate()
-
-        return (
-          <>
-            <h1 data-testid="posts-index-heading">Posts</h1>
-            <button
-              data-testid="first-post-btn"
-              onClick={() =>
-                navigate({
-                  to: '$postId',
-                  params: { postId: 'id1' },
-                })
-              }
-            >
-              To first post
-            </button>
-            <button
-              data-testid="second-post-btn"
-              onClick={() =>
-                navigate({
-                  to: '.',
-                  params: { postId: 'id2' },
-                })
-              }
-            >
-              To second post
-            </button>
-            <Outlet />
-          </>
-        )
-      }
-
-      const postsRoute = createRoute({
-        getParentRoute: () => layoutRoute,
-        path: 'posts',
-        component: PostsComponent,
+      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 PostComponent = () => {
-        const params = useParams({ strict: false })
-        return (
-          <>
-            <span data-testid={`post-${params().postId}`}>
-              Params: {params().postId}
-            </span>
-          </>
-        )
-      }
-
-      const postRoute = createRoute({
-        getParentRoute: () => postsRoute,
-        path: '$postId',
-        component: PostComponent,
+      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>
+              <Outlet />
+            </>
+          )
+        },
       })
 
-      const router = createRouter({
+      const paramARoute = createRoute({
+        getParentRoute: () => paramRoute,
+        path: 'a',
+        component: function ParamARoute() {
+          const navigate = useNavigate()
+          return (
+            <>
+              <h1>Param A Route</h1>
+              <button
+                onClick={() =>
+                  navigate({ from: paramARoute.fullPath, to: '..' })
+                }
+              >
+                Link to .. from /param/foo/a
+              </button>
+              <button
+                onClick={() =>
+                  navigate({ to: '..' })
+                }
+                data-testid={'link-to-previous'}
+              >
+                Link to .. from current active route
+              </button>
+              <Outlet />
+            </>
+          )
+        },
+      })
+
+      const paramBRoute = createRoute({
+        getParentRoute: () => paramARoute,
+        path: 'b',
+        component: function ParamBRoute() {
+          const navigate = useNavigate()
+          return (
+            <>
+              <h1>Param B Route</h1>
+              <button onClick={() => navigate({ to: '..' })}>
+                Link to Parent
+              </button>
+              <button
+                onClick={() => navigate({ to: '..', params: { param: 'bar' } })}
+              >
+                Link to Parent with param:bar
+              </button>
+              <button
+                onClick={() => navigate({ to: '..', params: { param: 'bar' } })}
+              >
+                Link to Parent with param:bar functional
+              </button>
+            </>
+          )
+        },
+      })
+
+      return createRouter({
         routeTree: rootRoute.addChildren([
           indexRoute,
-          layoutRoute.addChildren([postsRoute.addChildren([postRoute])]),
+          aRoute.addChildren([bRoute]),
+          paramRoute.addChildren([paramARoute, paramBRoute]),
         ]),
-        trailingSlash: trailingSlash ? 'always' : 'never',
+
+        basepath: basepath === '' ? undefined : basepath,
       })
+    }
+
+    test('should navigate to the parent route', async () => {
+      const router = setupRouter()
+
+      // Navigate to /a/b
+      window.history.replaceState(null, 'root', `${basepath}/a/b`)
 
       render(() => <RouterProvider router={router} />)
 
-      const postsButton = await screen.findByTestId('posts-btn')
+      // Inspect the link to go up a parent
+      const parentLink = await screen.findByText('Link to Parent')
 
-      fireEvent.click(postsButton)
+      // Click the link and ensure the new location
+      fireEvent.click(parentLink)
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/a`),
+      )
+    })
 
-      await waitFor(() => {
-        expect(screen.queryByTestId('posts-index-heading')).toBeInTheDocument()
-        expect(window.location.pathname).toEqual(`/posts${tail}`)
-      })
+    test('should navigate to the parent route and keep params', async () => {
+      const router = setupRouter()
 
-      const firstPostButton = await screen.findByTestId('first-post-btn')
+      // Navigate to /param/oldParamValue/a/b
+      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
 
-      fireEvent.click(firstPostButton)
+      render(() => <RouterProvider router={router} />)
 
-      await waitFor(() => {
-        expect(screen.queryByTestId('post-id1')).toBeInTheDocument()
-        expect(window.location.pathname).toEqual(`/posts/id1${tail}`)
-      })
+      // Inspect the link to go up a parent and keep the params
+      const parentLink = await screen.findByText('Link to Parent')
 
-      const secondPostButton = await screen.findByTestId('second-post-btn')
+      // Click the link and ensure the new location
+      fireEvent.click(parentLink)
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/param/foo/a`),
+      )
+    })
 
-      fireEvent.click(secondPostButton)
+    test('should navigate to the parent route and change params', async () => {
+      const router = setupRouter()
+      // Navigate to /param/oldParamValue/a/b
 
-      await waitFor(() => {
-        expect(screen.queryByTestId('post-id2')).toBeInTheDocument()
-        expect(window.location.pathname).toEqual(`/posts/id2${tail}`)
-      })
-    },
-  )
+      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
+      render(() => <RouterProvider router={router} />)
+
+      // Inspect the link to go up a parent and keep the params
+      const parentLink = await screen.findByText(
+        'Link to Parent with param:bar',
+      )
+
+      // Click the link and ensure the new location
+      fireEvent.click(parentLink)
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/param/bar/a`),
+      )
+    })
+
+    test('should navigate to a relative link based on render location with basepath', async () => {
+      const router = setupRouter()
 
+      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
+
+      render(() => <RouterProvider router={router} />)
+
+      // Inspect the relative link to ./a
+      const relativeLink = await screen.findByText('Link to ./a')
+
+      // Click the link and ensure the new location
+      fireEvent.click(relativeLink)
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/param/foo/a`),
+      )
+    })
+
+    test('should navigate to a parent link based on render location', async () => {
+      const router = setupRouter()
+
+      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
+
+      render(() => <RouterProvider router={router} />)
+
+      // Inspect the relative link to ./a
+      const relativeLink = await screen.findByText(
+        'Link to .. from /param/foo/a',
+      )
+
+      // Click the link and ensure the new location
+      fireEvent.click(relativeLink)
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/param/foo`),
+      )
+    })
+
+    test('should navigate to a parent link based on active location', async () => {
+      const router = setupRouter()
+
+      render(() => <RouterProvider router={router} />)
+
+      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
+
+      const relativeLink = await screen.findByTestId('link-to-previous')
+
+      // Click the link and ensure the new location
+      fireEvent.click(relativeLink)
+
+      await waitFor(() =>
+        expect(window.location.pathname).toBe(`${basepath}/param/foo/a`),
+      )
+    })
+
+    test('should navigate to same route with different params', async () => {
+      const router = setupRouter()
+
+      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
+
+      render(() => <RouterProvider router={router} />)
+
+      const parentLink = await screen.findByText('Link to . with param:bar')
+
+      fireEvent.click(parentLink)
+      await waitFor(
+        () =>
+          expect(window.location.pathname).toBe(`${basepath}/param/bar/a/b`),
+        {},
+      )
+    })
+  },
+)
+
+describe('relative navigate to current route', () => {
   test.each([true, false])(
-    'should navigate to current route with search params when using "." in nested route structure from non-Index Route with trailingSlash: %s',
-    async (trailingSlash) => {
+    'should navigate to current route with search params when using "." in nested route structure from Index Route with trailingSlash: %s',
+    async (trailingSlash: boolean) => {
       const tail = trailingSlash ? '/' : ''
+
       const rootRoute = createRootRoute()
 
       const IndexComponent = () => {
         const navigate = useNavigate()
         return (
           <>
-            <h1 data-testid="index-heading">Index</h1>
             <button
               data-testid="posts-btn"
-              onClick={() => navigate({ to: '/posts', params: { lang: '1' } })}
+              onClick={() => {
+                navigate({
+                  to: '/post',
+                })
+              }}
             >
-              Posts
+              Post
             </button>
-          </>
-        )
-      }
-
-      const indexRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        path: '/',
-        component: IndexComponent,
-      })
-
-      const PostsComponent = () => {
-        const navigate = postsRoute.useNavigate()
-        return (
-          <>
-            <h1 data-testid="posts-index-heading">Posts</h1>
             <button
-              data-testid="first-post-btn"
+              data-testid="search-btn"
               onClick={() =>
                 navigate({
-                  to: '$postId/detail',
-                  params: { postId: 'id1' },
+                  to: '.',
+                  search: {
+                    param1: 'value1',
+                  },
                 })
               }
             >
-              To first post
+              Search
+            </button>
+            <button
+              data-testid="search2-btn"
+              onClick={() =>
+                navigate({
+                  to: '/post',
+                  search: {
+                    param1: 'value2',
+                  },
+                })
+              }
+            >
+              Search2
             </button>
             <Outlet />
           </>
         )
       }
 
-      const postsRoute = createRoute({
+      const indexRoute = createRoute({
         getParentRoute: () => rootRoute,
-        path: 'posts',
-        component: PostsComponent,
-      })
-
-      const useModal = (name: string) => {
-        const currentOpen = postRoute.useSearch({
+        path: '/',
+        component: IndexComponent,
+        validateSearch: z.object({
+          param1: z.string().optional(),
+        }),
+      })
+
+      const postRoute = createRoute({
+        getParentRoute: () => indexRoute,
+        path: 'post',
+        component: () => <div>Post</div>,
+      })
+
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([indexRoute, postRoute]),
+        history,
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
+
+      render(() => <RouterProvider router={router} />)
+
+      const postButton = await screen.findByTestId('posts-btn')
+
+      fireEvent.click(postButton)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+      })
+
+      const searchButton = await screen.findByTestId('search-btn')
+
+      fireEvent.click(searchButton)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+        expect(router.state.location.search).toEqual({ param1: 'value1' })
+      })
+
+      const searchButton2 = await screen.findByTestId('search2-btn')
+
+      fireEvent.click(searchButton2)
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe(`/post${tail}`)
+        expect(router.state.location.search).toEqual({ param1: 'value2' })
+      })
+    },
+  )
+
+  test.each([true, false])(
+    'should navigate to current route with changing path params when using "." in nested route structure with trailingSlash: %s',
+    async (trailingSlash) => {
+      const tail = trailingSlash ? '/' : ''
+      const rootRoute = createRootRoute()
+
+      const IndexComponent = () => {
+        const navigate = useNavigate()
+        return (
+          <>
+            <h1 data-testid="index-heading">Index</h1>
+            <button
+              data-testid="posts-btn"
+              onClick={() => navigate({ to: '/posts' })}
+            >
+              Posts
+            </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 navigate = useNavigate()
+
+        return (
+          <>
+            <h1 data-testid="posts-index-heading">Posts</h1>
+            <button
+              data-testid="first-post-btn"
+              onClick={() =>
+                navigate({
+                  to: '$postId',
+                  params: { postId: 'id1' },
+                })
+              }
+            >
+              To first post
+            </button>
+            <button
+              data-testid="second-post-btn"
+              onClick={() =>
+                navigate({
+                  to: '.',
+                  params: { postId: 'id2' },
+                })
+              }
+            >
+              To second post
+            </button>
+            <Outlet />
+          </>
+        )
+      }
+
+      const postsRoute = createRoute({
+        getParentRoute: () => layoutRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
+
+      const PostComponent = () => {
+        const params = useParams({ strict: false })
+        return (
+          <>
+            <span data-testid={`post-${params().postId}`}>
+              Params: {params().postId}
+            </span>
+          </>
+        )
+      }
+
+      const postRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostComponent,
+      })
+
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([
+          indexRoute,
+          layoutRoute.addChildren([postsRoute.addChildren([postRoute])]),
+        ]),
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
+
+      render(() => <RouterProvider router={router} />)
+
+      const postsButton = await screen.findByTestId('posts-btn')
+
+      fireEvent.click(postsButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('posts-index-heading')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts${tail}`)
+      })
+
+      const firstPostButton = await screen.findByTestId('first-post-btn')
+
+      fireEvent.click(firstPostButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-id1')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/id1${tail}`)
+      })
+
+      const secondPostButton = await screen.findByTestId('second-post-btn')
+
+      fireEvent.click(secondPostButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('post-id2')).toBeInTheDocument()
+        expect(window.location.pathname).toEqual(`/posts/id2${tail}`)
+      })
+    },
+  )
+
+  test.each([true, false])(
+    'should navigate to current route with search params when using "." in nested route structure from non-Index Route with trailingSlash: %s',
+    async (trailingSlash) => {
+      const tail = trailingSlash ? '/' : ''
+      const rootRoute = createRootRoute()
+
+      const IndexComponent = () => {
+        const navigate = useNavigate()
+        return (
+          <>
+            <h1 data-testid="index-heading">Index</h1>
+            <button
+              data-testid="posts-btn"
+              onClick={() => navigate({ to: '/posts', params: { lang: '1' } })}
+            >
+              Posts
+            </button>
+          </>
+        )
+      }
+
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: IndexComponent,
+      })
+
+      const PostsComponent = () => {
+        const navigate = postsRoute.useNavigate()
+        return (
+          <>
+            <h1 data-testid="posts-index-heading">Posts</h1>
+            <button
+              data-testid="first-post-btn"
+              onClick={() =>
+                navigate({
+                  to: '$postId/detail',
+                  params: { postId: 'id1' },
+                })
+              }
+            >
+              To first post
+            </button>
+            <Outlet />
+          </>
+        )
+      }
+
+      const postsRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
+
+      const useModal = (name: string) => {
+        const currentOpen = postRoute.useSearch({
           select: (search) => search[`_${name}`],
         })
 
@@ -2114,389 +2524,4 @@ describe('relative navigate to from route', () => {
       })
     },
   )
-
-  describe('when on /posts/$postId and navigating to ../ with default `from` /posts', () => {
-    async function runTest(navigateVia: 'Route' | 'RouteApi') {
-      const rootRoute = createRootRoute()
-
-      const IndexComponent = () => {
-        const navigate = useNavigate()
-        return (
-          <>
-            <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 postsRoute = createRoute({
-        getParentRoute: () => layoutRoute,
-        path: 'posts',
-        component: PostsComponent,
-      })
-
-      const PostComponent = () => {
-        const params = useParams({ strict: false })
-        return (
-          <>
-            <span>Params: {params().postId}</span>
-            <Outlet />
-          </>
-        )
-      }
-
-      const postRoute = createRoute({
-        getParentRoute: () => postsRoute,
-        path: '$postId',
-        component: PostComponent,
-      })
-
-      const PostIndexComponent = () => {
-        return (
-          <>
-            <h1>Post Index</h1>
-          </>
-        )
-      }
-
-      const postIndexRoute = createRoute({
-        getParentRoute: () => postRoute,
-        path: '/',
-        component: PostIndexComponent,
-      })
-
-      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} />)
-
-      const postsButton = await screen.findByTestId('index-to-first-post-btn')
-
-      fireEvent.click(postsButton)
-
-      expect(await screen.findByTestId('details-heading')).toBeInTheDocument()
-
-      expect(window.location.pathname).toEqual('/posts/id1/details')
-
-      const homeButton = await screen.findByTestId('btn-to-home')
-
-      fireEvent.click(homeButton)
-
-      expect(await screen.findByTestId('index-heading')).toBeInTheDocument()
-      expect(window.location.pathname).toEqual('/')
-    }
-
-    test('Route', () => runTest('Route'))
-    test('RouteApi', () => runTest('RouteApi'))
-  })
 })
-
-describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
-  '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>
-              <Outlet />
-            </>
-          )
-        },
-      })
-
-      const paramARoute = createRoute({
-        getParentRoute: () => paramRoute,
-        path: 'a',
-        component: function ParamARoute() {
-          const navigate = useNavigate()
-          return (
-            <>
-              <h1>Param A Route</h1>
-              <button
-                onClick={() =>
-                  navigate({ from: paramARoute.fullPath, to: '..' })
-                }
-              >
-                Link to .. from /param/foo/a
-              </button>
-              <Outlet />
-            </>
-          )
-        },
-      })
-
-      const paramBRoute = createRoute({
-        getParentRoute: () => paramARoute,
-        path: 'b',
-        component: function ParamBRoute() {
-          const navigate = useNavigate()
-          return (
-            <>
-              <h1>Param B Route</h1>
-              <button onClick={() => navigate({ to: '..' })}>
-                Link to Parent
-              </button>
-              <button
-                onClick={() => navigate({ to: '..', params: { param: 'bar' } })}
-              >
-                Link to Parent with param:bar
-              </button>
-              <button
-                onClick={() => navigate({ to: '..', params: { param: 'bar' } })}
-              >
-                Link to Parent with param:bar functional
-              </button>
-            </>
-          )
-        },
-      })
-
-      return createRouter({
-        routeTree: rootRoute.addChildren([
-          indexRoute,
-          aRoute.addChildren([bRoute]),
-          paramRoute.addChildren([paramARoute, paramBRoute]),
-        ]),
-
-        basepath: basepath === '' ? undefined : basepath,
-      })
-    }
-
-    test('should navigate to the parent route', async () => {
-      const router = setupRouter()
-
-      // Navigate to /a/b
-      window.history.replaceState(null, 'root', `${basepath}/a/b`)
-
-      render(() => <RouterProvider router={router} />)
-
-      // Inspect the link to go up a parent
-      const parentLink = await screen.findByText('Link to Parent')
-
-      // Click the link and ensure the new location
-      fireEvent.click(parentLink)
-      await waitFor(() =>
-        expect(window.location.pathname).toBe(`${basepath}/a`),
-      )
-    })
-
-    test('should navigate to the parent route and keep params', async () => {
-      const router = setupRouter()
-
-      // Navigate to /param/oldParamValue/a/b
-      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
-
-      render(() => <RouterProvider router={router} />)
-
-      // Inspect the link to go up a parent and keep the params
-      const parentLink = await screen.findByText('Link to Parent')
-
-      // Click the link and ensure the new location
-      fireEvent.click(parentLink)
-      await waitFor(() =>
-        expect(window.location.pathname).toBe(`${basepath}/param/foo/a`),
-      )
-    })
-
-    test('should navigate to the parent route and change params', async () => {
-      const router = setupRouter()
-      // Navigate to /param/oldParamValue/a/b
-
-      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
-      render(() => <RouterProvider router={router} />)
-
-      // Inspect the link to go up a parent and keep the params
-      const parentLink = await screen.findByText(
-        'Link to Parent with param:bar',
-      )
-
-      // Click the link and ensure the new location
-      fireEvent.click(parentLink)
-      await waitFor(() =>
-        expect(window.location.pathname).toBe(`${basepath}/param/bar/a`),
-      )
-    })
-
-    test('should navigate to a relative link based on render location with basepath', async () => {
-      const router = setupRouter()
-
-      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
-
-      render(() => <RouterProvider router={router} />)
-
-      // Inspect the relative link to ./a
-      const relativeLink = await screen.findByText('Link to ./a')
-
-      // Click the link and ensure the new location
-      fireEvent.click(relativeLink)
-      await waitFor(() =>
-        expect(window.location.pathname).toBe(`${basepath}/param/foo/a`),
-      )
-    })
-
-    test('should navigate to a parent link based on render location', async () => {
-      const router = setupRouter()
-
-      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
-
-      render(() => <RouterProvider router={router} />)
-
-      // Inspect the relative link to ./a
-      const relativeLink = await screen.findByText(
-        'Link to .. from /param/foo/a',
-      )
-
-      // Click the link and ensure the new location
-      fireEvent.click(relativeLink)
-      await waitFor(() =>
-        expect(window.location.pathname).toBe(`${basepath}/param/foo`),
-      )
-    })
-
-    test('should navigate to same route with different params', async () => {
-      const router = setupRouter()
-
-      window.history.replaceState(null, 'root', `${basepath}/param/foo/a/b`)
-
-      render(() => <RouterProvider router={router} />)
-
-      const parentLink = await screen.findByText('Link to . with param:bar')
-
-      fireEvent.click(parentLink)
-      await waitFor(
-        () =>
-          expect(window.location.pathname).toBe(`${basepath}/param/bar/a/b`),
-        {},
-      )
-    })
-  },
-)

From 2acf67083610faebb171a938f06caa258bde85ed Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Tue, 19 Aug 2025 03:34:31 +0200
Subject: [PATCH 18/34] consolidate from logic

---
 packages/react-router/src/link.tsx            | 33 +++++-----------
 .../react-router/src/useActiveLocation.ts     | 33 ++++++++++++++++
 packages/react-router/src/useNavigate.tsx     | 22 ++---------
 packages/solid-router/src/link.tsx            | 26 ++-----------
 .../solid-router/src/useActiveLocation.ts     | 39 +++++++++++++++++++
 packages/solid-router/src/useNavigate.tsx     | 19 ++-------
 6 files changed, 93 insertions(+), 79 deletions(-)
 create mode 100644 packages/react-router/src/useActiveLocation.ts
 create mode 100644 packages/solid-router/src/useActiveLocation.ts

diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index d5fbe2e5a08..41294f1947d 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -4,16 +4,18 @@ import {
   deepEqual,
   exactPathTest,
   functionalUpdate,
-  last,
   preloadWarning,
   removeTrailingSlash,
 } from '@tanstack/router-core'
+import { useActiveLocation } from './useActiveLocation'
 import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 
-import { useForwardedRef, useIntersectionObserver } from './utils'
+import {
+  useForwardedRef,
+  useIntersectionObserver,
+} from './utils'
 
-import { useMatch } from './useMatch'
 import type {
   AnyRouter,
   Constrain,
@@ -100,37 +102,20 @@ export function useLinkProps<
     structuralSharing: true as any,
   })
 
-  const matchIndex = useMatch({
-    strict: false,
-    select: (match) => match.index,
-  })
+  const {getFromPath} = useActiveLocation()
 
-  // Track the active location to ensure recomputation on path changes
-  const activeLocation = useRouterState({
-    select: (s) => s.location,
-    structuralSharing: true as any,
-  })
+  const from = getFromPath(options.from)
 
   const _options = React.useMemo(
     () => {
-      const currentRouteMatches = router.matchRoutes(activeLocation, {
-        _buildLocation: false,
-      })
-
-      const from =
-        options.from ??
-        last(currentRouteMatches)?.fullPath ??
-        router.state.matches[matchIndex]!.fullPath
-
-      return { ...options, from }
+       return { ...options, from }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       router,
       currentSearch,
-      activeLocation,
+      from,
       options._fromLocation,
-      options.from,
       options.hash,
       options.to,
       options.search,
diff --git a/packages/react-router/src/useActiveLocation.ts b/packages/react-router/src/useActiveLocation.ts
new file mode 100644
index 00000000000..4939475be0b
--- /dev/null
+++ b/packages/react-router/src/useActiveLocation.ts
@@ -0,0 +1,33 @@
+import { last } from '@tanstack/router-core'
+import { useRouter } from './useRouter'
+import { useMatch } from './useMatch'
+import { useRouterState } from './useRouterState'
+import type { AnyRouteMatch } from '@tanstack/router-core'
+
+export type UseLocationResult = {activeLocationMatch: AnyRouteMatch | undefined, getFromPath: (from?: string) => string}
+
+export const useActiveLocation = (): UseLocationResult => {
+  const router = useRouter()
+
+  const currentRouteMatch = useMatch({
+    strict: false,
+    select: (match) => match,
+  })
+
+  const activeLocation = useRouterState({
+    select: (s) => s.location,
+    structuralSharing: true as any,
+  })
+
+  const activeLocationMatches = router.matchRoutes(activeLocation, {
+    _buildLocation: false,
+  })
+
+  const activeLocationMatch = last(activeLocationMatches)
+
+  const getFromPath = (from?: string) => {
+    return from ?? activeLocationMatch?.fullPath ?? currentRouteMatch.fullPath
+  }
+
+  return { activeLocationMatch, getFromPath }
+}
diff --git a/packages/react-router/src/useNavigate.tsx b/packages/react-router/src/useNavigate.tsx
index 83b5f63298c..821a2d30056 100644
--- a/packages/react-router/src/useNavigate.tsx
+++ b/packages/react-router/src/useNavigate.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
-import { last } from '@tanstack/router-core'
 import { useRouter } from './useRouter'
-import { useMatch } from './useMatch'
+import { useActiveLocation } from './useActiveLocation'
 import type {
   AnyRouter,
   FromPathOption,
@@ -18,24 +17,11 @@ export function useNavigate<
 }): UseNavigateResult<TDefaultFrom> {
   const router = useRouter()
 
-  // Just get the index of the current match to avoid rerenders
-  // as much as possible
-  const matchIndex = useMatch({
-    strict: false,
-    select: (match) => match.index,
-  })
+  const { getFromPath, activeLocationMatch } = useActiveLocation()
 
   return React.useCallback(
     (options: NavigateOptions) => {
-      const currentRouteMatches = router.matchRoutes(router.latestLocation, {
-        _buildLocation: false,
-      })
-
-      const from =
-        options.from ??
-        _defaultOpts?.from ??
-        last(currentRouteMatches)?.fullPath ??
-        router.state.matches[matchIndex]!.fullPath
+      const from  = getFromPath(options.from ?? _defaultOpts?.from)
 
       return router.navigate({
         ...options,
@@ -43,7 +29,7 @@ export function useNavigate<
       })
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [_defaultOpts?.from, router.navigate, router.latestLocation, matchIndex],
+    [_defaultOpts?.from, router, activeLocationMatch],
   ) as UseNavigateResult<TDefaultFrom>
 }
 
diff --git a/packages/solid-router/src/link.tsx b/packages/solid-router/src/link.tsx
index 79aed4f8f9b..27533134a28 100644
--- a/packages/solid-router/src/link.tsx
+++ b/packages/solid-router/src/link.tsx
@@ -6,17 +6,16 @@ import {
   deepEqual,
   exactPathTest,
   functionalUpdate,
-  last,
   preloadWarning,
   removeTrailingSlash,
 } from '@tanstack/router-core'
 import { Dynamic } from 'solid-js/web'
+import { useActiveLocation } from './useActiveLocation'
 import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 
 import { useIntersectionObserver } from './utils'
 
-import { useMatch } from './useMatch'
 import type {
   AnyRouter,
   Constrain,
@@ -141,24 +140,8 @@ export function useLinkProps<
   //   select: (match) => options.from ?? match.fullPath,
   // })
 
-  const matchIndex = useMatch({
-    strict: false,
-    select: (match) => match.index,
-  })
-
-  const activeLocation = useRouterState({ select: (s) => s.location })
-
-  const from = Solid.createMemo(() => {
-    const currentRouteMatches = router.matchRoutes(activeLocation(), {
-      _buildLocation: false,
-    })
-
-    return (
-      options.from ??
-      last(currentRouteMatches)?.fullPath ??
-      router.state.matches[matchIndex()]!.fullPath
-    )
-  })
+  const { getFromPath } = useActiveLocation()
+  const from = getFromPath(options.from);
 
   const _options = () => {
     return {
@@ -169,8 +152,7 @@ export function useLinkProps<
 
   const next = Solid.createMemo(() => {
     currentSearch()
-    // Access activeLocation to make this memo re-run on route changes
-    activeLocation()
+    from()
     return router.buildLocation(_options() as any)
   })
 
diff --git a/packages/solid-router/src/useActiveLocation.ts b/packages/solid-router/src/useActiveLocation.ts
new file mode 100644
index 00000000000..92b17acaf5b
--- /dev/null
+++ b/packages/solid-router/src/useActiveLocation.ts
@@ -0,0 +1,39 @@
+import { last } from '@tanstack/router-core'
+import {  createMemo } from 'solid-js'
+import { useRouterState } from './useRouterState'
+import { useMatch } from './useMatch'
+import { useRouter } from './useRouter'
+import type {Accessor} from 'solid-js';
+import type { AnyRouteMatch} from '@tanstack/router-core'
+
+export type UseActiveLocationResult = { activeLocationMatch: Accessor<AnyRouteMatch | undefined>, getFromPath: (from?: string) => Accessor<string> }
+
+export function useActiveLocation(): UseActiveLocationResult {
+  const router = useRouter()
+
+  const currentRouteMatch = useMatch({
+    strict: false,
+    select: (match) => match,
+  })
+
+  const activeLocation = useRouterState({
+    select: (s) => s.location
+  })
+
+  const activeLocationMatch = createMemo(() => {
+    const activeLocationMatches = router.matchRoutes(activeLocation(), {
+      _buildLocation: false,
+    })
+
+    return last(activeLocationMatches)
+  })
+
+
+
+
+  const getFromPath = (from?: string) => {
+    return createMemo(() => from ?? activeLocationMatch()?.fullPath ?? currentRouteMatch().fullPath)
+  }
+
+  return { activeLocationMatch, getFromPath }
+}
diff --git a/packages/solid-router/src/useNavigate.tsx b/packages/solid-router/src/useNavigate.tsx
index a0b99751cb7..a467890686f 100644
--- a/packages/solid-router/src/useNavigate.tsx
+++ b/packages/solid-router/src/useNavigate.tsx
@@ -1,7 +1,6 @@
 import * as Solid from 'solid-js'
-import { last } from '@tanstack/router-core'
 import { useRouter } from './useRouter'
-import { useMatch } from './useMatch'
+import { useActiveLocation } from './useActiveLocation'
 import type {
   AnyRouter,
   FromPathOption,
@@ -18,23 +17,13 @@ export function useNavigate<
 }): UseNavigateResult<TDefaultFrom> {
   const router = useRouter()
 
-  const matchIndex = useMatch({
-    strict: false,
-    select: (match) => match.index,
-  })
-
+  const {getFromPath} = useActiveLocation()
   return ((options: NavigateOptions) => {
-    const currentRouteMatches = router.matchRoutes(router.latestLocation, {
-      _buildLocation: false,
-    })
+    const from  = getFromPath(options.from ?? _defaultOpts?.from)
 
     return router.navigate({
       ...options,
-      from:
-        options.from ??
-        _defaultOpts?.from ??
-        last(currentRouteMatches)?.fullPath ??
-        router.state.matches[matchIndex()]!.fullPath,
+      from: from()
     })
   }) as UseNavigateResult<TDefaultFrom>
 }

From 8bd57a284f01ae8ec4e6bf367a862d606c6edcef Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Tue, 19 Aug 2025 05:29:00 +0200
Subject: [PATCH 19/34] revert change to SolidJS useNavigate

---
 .../solid-router/src/useActiveLocation.ts     |  3 ---
 packages/solid-router/src/useNavigate.tsx     | 19 +++++++++++++++----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/solid-router/src/useActiveLocation.ts b/packages/solid-router/src/useActiveLocation.ts
index 92b17acaf5b..90ccf13fe23 100644
--- a/packages/solid-router/src/useActiveLocation.ts
+++ b/packages/solid-router/src/useActiveLocation.ts
@@ -28,9 +28,6 @@ export function useActiveLocation(): UseActiveLocationResult {
     return last(activeLocationMatches)
   })
 
-
-
-
   const getFromPath = (from?: string) => {
     return createMemo(() => from ?? activeLocationMatch()?.fullPath ?? currentRouteMatch().fullPath)
   }
diff --git a/packages/solid-router/src/useNavigate.tsx b/packages/solid-router/src/useNavigate.tsx
index a467890686f..a0b99751cb7 100644
--- a/packages/solid-router/src/useNavigate.tsx
+++ b/packages/solid-router/src/useNavigate.tsx
@@ -1,6 +1,7 @@
 import * as Solid from 'solid-js'
+import { last } from '@tanstack/router-core'
 import { useRouter } from './useRouter'
-import { useActiveLocation } from './useActiveLocation'
+import { useMatch } from './useMatch'
 import type {
   AnyRouter,
   FromPathOption,
@@ -17,13 +18,23 @@ export function useNavigate<
 }): UseNavigateResult<TDefaultFrom> {
   const router = useRouter()
 
-  const {getFromPath} = useActiveLocation()
+  const matchIndex = useMatch({
+    strict: false,
+    select: (match) => match.index,
+  })
+
   return ((options: NavigateOptions) => {
-    const from  = getFromPath(options.from ?? _defaultOpts?.from)
+    const currentRouteMatches = router.matchRoutes(router.latestLocation, {
+      _buildLocation: false,
+    })
 
     return router.navigate({
       ...options,
-      from: from()
+      from:
+        options.from ??
+        _defaultOpts?.from ??
+        last(currentRouteMatches)?.fullPath ??
+        router.state.matches[matchIndex()]!.fullPath,
     })
   }) as UseNavigateResult<TDefaultFrom>
 }

From 9c278a1ada9bdfbaa12748174b89437465daab1e Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Tue, 19 Aug 2025 03:32:37 +0000
Subject: [PATCH 20/34] ci: apply automated fixes

---
 packages/react-router/src/link.tsx            |  9 +++----
 .../react-router/src/useActiveLocation.ts     |  5 +++-
 packages/react-router/src/useNavigate.tsx     |  2 +-
 packages/react-router/tests/link.test.tsx     |  6 +----
 .../react-router/tests/useNavigate.test.tsx   | 27 +++++--------------
 packages/solid-router/src/link.tsx            |  2 +-
 .../solid-router/src/useActiveLocation.ts     | 18 ++++++++-----
 .../solid-router/tests/useNavigate.test.tsx   |  4 +--
 8 files changed, 30 insertions(+), 43 deletions(-)

diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index 41294f1947d..944314b7e94 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -11,10 +11,7 @@ import { useActiveLocation } from './useActiveLocation'
 import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 
-import {
-  useForwardedRef,
-  useIntersectionObserver,
-} from './utils'
+import { useForwardedRef, useIntersectionObserver } from './utils'
 
 import type {
   AnyRouter,
@@ -102,13 +99,13 @@ export function useLinkProps<
     structuralSharing: true as any,
   })
 
-  const {getFromPath} = useActiveLocation()
+  const { getFromPath } = useActiveLocation()
 
   const from = getFromPath(options.from)
 
   const _options = React.useMemo(
     () => {
-       return { ...options, from }
+      return { ...options, from }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
diff --git a/packages/react-router/src/useActiveLocation.ts b/packages/react-router/src/useActiveLocation.ts
index 4939475be0b..95b14fd7e74 100644
--- a/packages/react-router/src/useActiveLocation.ts
+++ b/packages/react-router/src/useActiveLocation.ts
@@ -4,7 +4,10 @@ import { useMatch } from './useMatch'
 import { useRouterState } from './useRouterState'
 import type { AnyRouteMatch } from '@tanstack/router-core'
 
-export type UseLocationResult = {activeLocationMatch: AnyRouteMatch | undefined, getFromPath: (from?: string) => string}
+export type UseLocationResult = {
+  activeLocationMatch: AnyRouteMatch | undefined
+  getFromPath: (from?: string) => string
+}
 
 export const useActiveLocation = (): UseLocationResult => {
   const router = useRouter()
diff --git a/packages/react-router/src/useNavigate.tsx b/packages/react-router/src/useNavigate.tsx
index 821a2d30056..d043ee102aa 100644
--- a/packages/react-router/src/useNavigate.tsx
+++ b/packages/react-router/src/useNavigate.tsx
@@ -21,7 +21,7 @@ export function useNavigate<
 
   return React.useCallback(
     (options: NavigateOptions) => {
-      const from  = getFromPath(options.from ?? _defaultOpts?.from)
+      const from = getFromPath(options.from ?? _defaultOpts?.from)
 
       return router.navigate({
         ...options,
diff --git a/packages/react-router/tests/link.test.tsx b/packages/react-router/tests/link.test.tsx
index 7a8971b6a30..cb6124db79e 100644
--- a/packages/react-router/tests/link.test.tsx
+++ b/packages/react-router/tests/link.test.tsx
@@ -6057,11 +6057,7 @@ describe('when on /posts/$postId and navigating to ../ with default `from` /post
       return (
         <>
           <h1>Posts</h1>
-          {
-            navigateVia === 'Route'
-              ? <LinkViaRoute />
-              : <LinkViaRouteApi />
-          }
+          {navigateVia === 'Route' ? <LinkViaRoute /> : <LinkViaRouteApi />}
           <Outlet />
         </>
       )
diff --git a/packages/react-router/tests/useNavigate.test.tsx b/packages/react-router/tests/useNavigate.test.tsx
index ebd2f0a21df..fa731c0b16b 100644
--- a/packages/react-router/tests/useNavigate.test.tsx
+++ b/packages/react-router/tests/useNavigate.test.tsx
@@ -1573,9 +1573,7 @@ test.each([true, false])(
 
     fireEvent.click(postsButton)
 
-    expect(
-      await screen.findByTestId('posts-index-heading'),
-    ).toBeInTheDocument()
+    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
     expect(window.location.pathname).toEqual(`/posts${tail}`)
 
     const firstPostButton = await screen.findByTestId('first-post-btn')
@@ -1741,9 +1739,7 @@ test.each([true, false])(
 
     fireEvent.click(postsButton)
 
-    expect(
-      await screen.findByTestId('posts-index-heading'),
-    ).toBeInTheDocument()
+    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
 
     const post1Button = await screen.findByTestId('first-post-btn')
 
@@ -1873,7 +1869,7 @@ test.each([true, false])(
 
     expect(router.state.location.pathname).toBe(`/`)
     expect(router.state.location.search).toEqual({})
-  }
+  },
 )
 
 test.each([true, false])(
@@ -2058,9 +2054,7 @@ test.each([true, false])(
 
     fireEvent.click(postsButton)
 
-    expect(
-      await screen.findByTestId('posts-index-heading'),
-    ).toBeInTheDocument()
+    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
     expect(window.location.pathname).toEqual(`/posts${tail}`)
 
     const firstPostButton = await screen.findByTestId('first-post-btn')
@@ -2095,18 +2089,14 @@ test.each([true, false])(
 
     fireEvent.click(postNotesButton)
 
-    expect(
-      await screen.findByTestId('post-notes-heading'),
-    ).toBeInTheDocument()
+    expect(await screen.findByTestId('post-notes-heading')).toBeInTheDocument()
     expect(window.location.pathname).toEqual(`/posts/1/notes${tail}`)
 
     const toPostsIndexButton = await screen.findByTestId('to-posts-index-btn')
 
     fireEvent.click(toPostsIndexButton)
 
-    expect(
-      await screen.findByTestId('posts-index-heading'),
-    ).toBeInTheDocument()
+    expect(await screen.findByTestId('posts-index-heading')).toBeInTheDocument()
     expect(screen.queryByTestId('post-notes-heading')).not.toBeInTheDocument()
     expect(
       screen.queryByTestId('post-detail-index-heading'),
@@ -2357,9 +2347,7 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
                 Link to .. from /param/foo/a
               </button>
               <button
-                onClick={() =>
-                  navigate({ to: '..' })
-                }
+                onClick={() => navigate({ to: '..' })}
                 data-testid={'link-to-previous'}
               >
                 Link to .. from current active route
@@ -2533,7 +2521,6 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
       expect(window.location.pathname).toBe(`${basepath}/param/foo/a`)
     })
 
-
     test('should navigate to same route with different params', async () => {
       const router = setupRouter()
 
diff --git a/packages/solid-router/src/link.tsx b/packages/solid-router/src/link.tsx
index 27533134a28..ac5432124cd 100644
--- a/packages/solid-router/src/link.tsx
+++ b/packages/solid-router/src/link.tsx
@@ -141,7 +141,7 @@ export function useLinkProps<
   // })
 
   const { getFromPath } = useActiveLocation()
-  const from = getFromPath(options.from);
+  const from = getFromPath(options.from)
 
   const _options = () => {
     return {
diff --git a/packages/solid-router/src/useActiveLocation.ts b/packages/solid-router/src/useActiveLocation.ts
index 90ccf13fe23..b0978ccb61a 100644
--- a/packages/solid-router/src/useActiveLocation.ts
+++ b/packages/solid-router/src/useActiveLocation.ts
@@ -1,12 +1,15 @@
 import { last } from '@tanstack/router-core'
-import {  createMemo } from 'solid-js'
+import { createMemo } from 'solid-js'
 import { useRouterState } from './useRouterState'
 import { useMatch } from './useMatch'
 import { useRouter } from './useRouter'
-import type {Accessor} from 'solid-js';
-import type { AnyRouteMatch} from '@tanstack/router-core'
+import type { Accessor } from 'solid-js'
+import type { AnyRouteMatch } from '@tanstack/router-core'
 
-export type UseActiveLocationResult = { activeLocationMatch: Accessor<AnyRouteMatch | undefined>, getFromPath: (from?: string) => Accessor<string> }
+export type UseActiveLocationResult = {
+  activeLocationMatch: Accessor<AnyRouteMatch | undefined>
+  getFromPath: (from?: string) => Accessor<string>
+}
 
 export function useActiveLocation(): UseActiveLocationResult {
   const router = useRouter()
@@ -17,7 +20,7 @@ export function useActiveLocation(): UseActiveLocationResult {
   })
 
   const activeLocation = useRouterState({
-    select: (s) => s.location
+    select: (s) => s.location,
   })
 
   const activeLocationMatch = createMemo(() => {
@@ -29,7 +32,10 @@ export function useActiveLocation(): UseActiveLocationResult {
   })
 
   const getFromPath = (from?: string) => {
-    return createMemo(() => from ?? activeLocationMatch()?.fullPath ?? currentRouteMatch().fullPath)
+    return createMemo(
+      () =>
+        from ?? activeLocationMatch()?.fullPath ?? currentRouteMatch().fullPath,
+    )
   }
 
   return { activeLocationMatch, getFromPath }
diff --git a/packages/solid-router/tests/useNavigate.test.tsx b/packages/solid-router/tests/useNavigate.test.tsx
index d4d15eed1a6..d3eb186cb21 100644
--- a/packages/solid-router/tests/useNavigate.test.tsx
+++ b/packages/solid-router/tests/useNavigate.test.tsx
@@ -1553,9 +1553,7 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
                 Link to .. from /param/foo/a
               </button>
               <button
-                onClick={() =>
-                  navigate({ to: '..' })
-                }
+                onClick={() => navigate({ to: '..' })}
                 data-testid={'link-to-previous'}
               >
                 Link to .. from current active route

From 2d92bc9f3a2a2458456e266cf1e7aef3313e968b Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Tue, 19 Aug 2025 12:40:21 +0200
Subject: [PATCH 21/34] rersolve inconsistency between solid and react
 implementation

---
 packages/react-router/src/link.tsx            |  7 ++-
 .../react-router/src/useActiveLocation.ts     | 43 ++++++++------
 packages/react-router/src/useNavigate.tsx     |  4 +-
 packages/solid-router/src/link.tsx            | 14 ++---
 .../solid-router/src/useActiveLocation.ts     | 56 ++++++++++---------
 packages/solid-router/src/useNavigate.tsx     | 19 ++-----
 6 files changed, 71 insertions(+), 72 deletions(-)

diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index 944314b7e94..a28abb44725 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -99,17 +99,18 @@ export function useLinkProps<
     structuralSharing: true as any,
   })
 
-  const { getFromPath } = useActiveLocation()
+  const { getFromPath, activeLocation } = useActiveLocation()
 
-  const from = getFromPath(options.from)
+  const from = getFromPath(options.from);
 
   const _options = React.useMemo(
     () => {
-      return { ...options, from }
+       return { ...options, from }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       router,
+      activeLocation,
       currentSearch,
       from,
       options._fromLocation,
diff --git a/packages/react-router/src/useActiveLocation.ts b/packages/react-router/src/useActiveLocation.ts
index 95b14fd7e74..aa3587dc2b4 100644
--- a/packages/react-router/src/useActiveLocation.ts
+++ b/packages/react-router/src/useActiveLocation.ts
@@ -1,36 +1,47 @@
 import { last } from '@tanstack/router-core'
+import { useCallback, useEffect, useState } from 'react'
 import { useRouter } from './useRouter'
 import { useMatch } from './useMatch'
-import { useRouterState } from './useRouterState'
-import type { AnyRouteMatch } from '@tanstack/router-core'
+import type { AnyRouteMatch, ParsedLocation } from '@tanstack/router-core'
 
 export type UseLocationResult = {
   activeLocationMatch: AnyRouteMatch | undefined
   getFromPath: (from?: string) => string
 }
 
-export const useActiveLocation = (): UseLocationResult => {
-  const router = useRouter()
+export const useActiveLocation = (location?: ParsedLocation) => {
+  const {matchRoutes, state} = useRouter()
+  const [activeLocation, setActiveLocation] = useState<ParsedLocation>(location ?? state.location)
+  const [customActiveLocation, _setCustomActiveLocation] = useState<ParsedLocation>(location ?? state.location)
+  const [useCustomActiveLocation, setUseCustomActiveLocation] = useState(!!location)
+
+  useEffect(() => {
+    if (!useCustomActiveLocation) {
+      setActiveLocation(state.location)
+    } else {
+      setActiveLocation(customActiveLocation)
+    }
+  }, [state.location, useCustomActiveLocation, customActiveLocation])
+
+  const setCustomActiveLocation = (location: ParsedLocation) => {
+    _setCustomActiveLocation(location);
+    setUseCustomActiveLocation(true);
+  }
 
   const currentRouteMatch = useMatch({
     strict: false,
     select: (match) => match,
   })
 
-  const activeLocation = useRouterState({
-    select: (s) => s.location,
-    structuralSharing: true as any,
-  })
+  const getFromPath = useCallback((from?: string) => {
+    const activeLocationMatches = matchRoutes(activeLocation, {
+        _buildLocation: false,
+      })
 
-  const activeLocationMatches = router.matchRoutes(activeLocation, {
-    _buildLocation: false,
-  })
+    const activeLocationMatch = last(activeLocationMatches)
 
-  const activeLocationMatch = last(activeLocationMatches)
-
-  const getFromPath = (from?: string) => {
     return from ?? activeLocationMatch?.fullPath ?? currentRouteMatch.fullPath
-  }
+  }, [activeLocation, currentRouteMatch.fullPath, matchRoutes])
 
-  return { activeLocationMatch, getFromPath }
+  return { activeLocation, getFromPath, setActiveLocation: setCustomActiveLocation }
 }
diff --git a/packages/react-router/src/useNavigate.tsx b/packages/react-router/src/useNavigate.tsx
index d043ee102aa..c12cffb9c93 100644
--- a/packages/react-router/src/useNavigate.tsx
+++ b/packages/react-router/src/useNavigate.tsx
@@ -17,7 +17,7 @@ export function useNavigate<
 }): UseNavigateResult<TDefaultFrom> {
   const router = useRouter()
 
-  const { getFromPath, activeLocationMatch } = useActiveLocation()
+  const { getFromPath, activeLocation } = useActiveLocation()
 
   return React.useCallback(
     (options: NavigateOptions) => {
@@ -29,7 +29,7 @@ export function useNavigate<
       })
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [_defaultOpts?.from, router, activeLocationMatch],
+    [_defaultOpts?.from, router, getFromPath, activeLocation],
   ) as UseNavigateResult<TDefaultFrom>
 }
 
diff --git a/packages/solid-router/src/link.tsx b/packages/solid-router/src/link.tsx
index ac5432124cd..51c5ef206d3 100644
--- a/packages/solid-router/src/link.tsx
+++ b/packages/solid-router/src/link.tsx
@@ -10,12 +10,12 @@ import {
   removeTrailingSlash,
 } from '@tanstack/router-core'
 import { Dynamic } from 'solid-js/web'
-import { useActiveLocation } from './useActiveLocation'
 import { useRouterState } from './useRouterState'
 import { useRouter } from './useRouter'
 
 import { useIntersectionObserver } from './utils'
 
+import { useActiveLocation } from './useActiveLocation'
 import type {
   AnyRouter,
   Constrain,
@@ -130,17 +130,11 @@ export function useLinkProps<
   }
 
   const currentSearch = useRouterState({
-    select: (s) => s.location.searchStr,
+    select: (s) => s.location.searchStr
   })
 
-  // when `from` is not supplied, use the route of the current match as the `from` location
-  // so relative routing works as expected
-  // const from = useMatch({
-  //   strict: false,
-  //   select: (match) => options.from ?? match.fullPath,
-  // })
+  const {getFromPath, activeLocation} = useActiveLocation()
 
-  const { getFromPath } = useActiveLocation()
   const from = getFromPath(options.from)
 
   const _options = () => {
@@ -152,7 +146,7 @@ export function useLinkProps<
 
   const next = Solid.createMemo(() => {
     currentSearch()
-    from()
+    activeLocation()
     return router.buildLocation(_options() as any)
   })
 
diff --git a/packages/solid-router/src/useActiveLocation.ts b/packages/solid-router/src/useActiveLocation.ts
index b0978ccb61a..294f1d43504 100644
--- a/packages/solid-router/src/useActiveLocation.ts
+++ b/packages/solid-router/src/useActiveLocation.ts
@@ -1,42 +1,44 @@
 import { last } from '@tanstack/router-core'
-import { createMemo } from 'solid-js'
-import { useRouterState } from './useRouterState'
+import { createEffect, createSignal, } from 'solid-js'
+import * as Solid from 'solid-js'
 import { useMatch } from './useMatch'
 import { useRouter } from './useRouter'
-import type { Accessor } from 'solid-js'
-import type { AnyRouteMatch } from '@tanstack/router-core'
-
-export type UseActiveLocationResult = {
-  activeLocationMatch: Accessor<AnyRouteMatch | undefined>
-  getFromPath: (from?: string) => Accessor<string>
-}
+import type { ParsedLocation} from '@tanstack/router-core'
+import { useRouterState } from './useRouterState'
 
-export function useActiveLocation(): UseActiveLocationResult {
+export function useActiveLocation(location?: ParsedLocation) {
   const router = useRouter()
-
-  const currentRouteMatch = useMatch({
-    strict: false,
-    select: (match) => match,
+  const [activeLocation, setActiveLocation] = createSignal<ParsedLocation>(location ?? useRouterState({select: (state) => state.location})());
+  const [customActiveLocation, _setCustomActiveLocation] = createSignal<ParsedLocation>(location ?? useRouterState({select: (state) => state.location})());
+  const [useCustomActiveLocation, setUseCustomActiveLocation] = createSignal(!!location);
+
+  createEffect(() => {
+    if (!useCustomActiveLocation()) {
+      setActiveLocation(useRouterState({select: (state) => state.location}))
+    } else {
+      setActiveLocation(customActiveLocation())
+    }
   })
 
-  const activeLocation = useRouterState({
-    select: (s) => s.location,
+  const setCustomActiveLocation = (location: ParsedLocation) => {
+    _setCustomActiveLocation(location)
+    setUseCustomActiveLocation(true)
+  }
+
+  const matchIndex = useMatch({
+    strict: false,
+    select: (match) => match.index,
   })
 
-  const activeLocationMatch = createMemo(() => {
-    const activeLocationMatches = router.matchRoutes(activeLocation(), {
+  const getFromPath = (from?: string) => Solid.createMemo(() => {
+    const currentRouteMatches = router.matchRoutes(activeLocation(), {
       _buildLocation: false,
     })
 
-    return last(activeLocationMatches)
+    return from ??
+      last(currentRouteMatches)?.fullPath ??
+      router.state.matches[matchIndex()]!.fullPath
   })
 
-  const getFromPath = (from?: string) => {
-    return createMemo(
-      () =>
-        from ?? activeLocationMatch()?.fullPath ?? currentRouteMatch().fullPath,
-    )
-  }
-
-  return { activeLocationMatch, getFromPath }
+  return { activeLocation, getFromPath, setActiveLocation: setCustomActiveLocation }
 }
diff --git a/packages/solid-router/src/useNavigate.tsx b/packages/solid-router/src/useNavigate.tsx
index a0b99751cb7..9ba94d9faba 100644
--- a/packages/solid-router/src/useNavigate.tsx
+++ b/packages/solid-router/src/useNavigate.tsx
@@ -1,7 +1,6 @@
 import * as Solid from 'solid-js'
-import { last } from '@tanstack/router-core'
 import { useRouter } from './useRouter'
-import { useMatch } from './useMatch'
+import { useActiveLocation } from './useActiveLocation'
 import type {
   AnyRouter,
   FromPathOption,
@@ -18,23 +17,15 @@ export function useNavigate<
 }): UseNavigateResult<TDefaultFrom> {
   const router = useRouter()
 
-  const matchIndex = useMatch({
-    strict: false,
-    select: (match) => match.index,
-  })
+  const {getFromPath, setActiveLocation} = useActiveLocation(router.latestLocation);
 
   return ((options: NavigateOptions) => {
-    const currentRouteMatches = router.matchRoutes(router.latestLocation, {
-      _buildLocation: false,
-    })
+    setActiveLocation(router.latestLocation)
+    const from = getFromPath(options.from ?? _defaultOpts?.from)
 
     return router.navigate({
       ...options,
-      from:
-        options.from ??
-        _defaultOpts?.from ??
-        last(currentRouteMatches)?.fullPath ??
-        router.state.matches[matchIndex()]!.fullPath,
+      from: from()
     })
   }) as UseNavigateResult<TDefaultFrom>
 }

From f7b9a50c4606f6c7255694a6f8906eea799f46c8 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Tue, 19 Aug 2025 20:18:46 +0000
Subject: [PATCH 22/34] ci: apply automated fixes

---
 packages/react-router/src/link.tsx            |  4 +-
 .../react-router/src/useActiveLocation.ts     | 35 +++++++++------
 packages/solid-router/src/link.tsx            |  4 +-
 .../solid-router/src/useActiveLocation.ts     | 43 ++++++++++++-------
 packages/solid-router/src/useNavigate.tsx     |  6 ++-
 5 files changed, 59 insertions(+), 33 deletions(-)

diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index a28abb44725..32bf1c76fac 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -101,11 +101,11 @@ export function useLinkProps<
 
   const { getFromPath, activeLocation } = useActiveLocation()
 
-  const from = getFromPath(options.from);
+  const from = getFromPath(options.from)
 
   const _options = React.useMemo(
     () => {
-       return { ...options, from }
+      return { ...options, from }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
diff --git a/packages/react-router/src/useActiveLocation.ts b/packages/react-router/src/useActiveLocation.ts
index aa3587dc2b4..52b212e6b08 100644
--- a/packages/react-router/src/useActiveLocation.ts
+++ b/packages/react-router/src/useActiveLocation.ts
@@ -10,10 +10,14 @@ export type UseLocationResult = {
 }
 
 export const useActiveLocation = (location?: ParsedLocation) => {
-  const {matchRoutes, state} = useRouter()
-  const [activeLocation, setActiveLocation] = useState<ParsedLocation>(location ?? state.location)
-  const [customActiveLocation, _setCustomActiveLocation] = useState<ParsedLocation>(location ?? state.location)
-  const [useCustomActiveLocation, setUseCustomActiveLocation] = useState(!!location)
+  const { matchRoutes, state } = useRouter()
+  const [activeLocation, setActiveLocation] = useState<ParsedLocation>(
+    location ?? state.location,
+  )
+  const [customActiveLocation, _setCustomActiveLocation] =
+    useState<ParsedLocation>(location ?? state.location)
+  const [useCustomActiveLocation, setUseCustomActiveLocation] =
+    useState(!!location)
 
   useEffect(() => {
     if (!useCustomActiveLocation) {
@@ -24,8 +28,8 @@ export const useActiveLocation = (location?: ParsedLocation) => {
   }, [state.location, useCustomActiveLocation, customActiveLocation])
 
   const setCustomActiveLocation = (location: ParsedLocation) => {
-    _setCustomActiveLocation(location);
-    setUseCustomActiveLocation(true);
+    _setCustomActiveLocation(location)
+    setUseCustomActiveLocation(true)
   }
 
   const currentRouteMatch = useMatch({
@@ -33,15 +37,22 @@ export const useActiveLocation = (location?: ParsedLocation) => {
     select: (match) => match,
   })
 
-  const getFromPath = useCallback((from?: string) => {
-    const activeLocationMatches = matchRoutes(activeLocation, {
+  const getFromPath = useCallback(
+    (from?: string) => {
+      const activeLocationMatches = matchRoutes(activeLocation, {
         _buildLocation: false,
       })
 
-    const activeLocationMatch = last(activeLocationMatches)
+      const activeLocationMatch = last(activeLocationMatches)
 
-    return from ?? activeLocationMatch?.fullPath ?? currentRouteMatch.fullPath
-  }, [activeLocation, currentRouteMatch.fullPath, matchRoutes])
+      return from ?? activeLocationMatch?.fullPath ?? currentRouteMatch.fullPath
+    },
+    [activeLocation, currentRouteMatch.fullPath, matchRoutes],
+  )
 
-  return { activeLocation, getFromPath, setActiveLocation: setCustomActiveLocation }
+  return {
+    activeLocation,
+    getFromPath,
+    setActiveLocation: setCustomActiveLocation,
+  }
 }
diff --git a/packages/solid-router/src/link.tsx b/packages/solid-router/src/link.tsx
index 51c5ef206d3..4b2434627b1 100644
--- a/packages/solid-router/src/link.tsx
+++ b/packages/solid-router/src/link.tsx
@@ -130,10 +130,10 @@ export function useLinkProps<
   }
 
   const currentSearch = useRouterState({
-    select: (s) => s.location.searchStr
+    select: (s) => s.location.searchStr,
   })
 
-  const {getFromPath, activeLocation} = useActiveLocation()
+  const { getFromPath, activeLocation } = useActiveLocation()
 
   const from = getFromPath(options.from)
 
diff --git a/packages/solid-router/src/useActiveLocation.ts b/packages/solid-router/src/useActiveLocation.ts
index 294f1d43504..111b7082dda 100644
--- a/packages/solid-router/src/useActiveLocation.ts
+++ b/packages/solid-router/src/useActiveLocation.ts
@@ -1,20 +1,26 @@
 import { last } from '@tanstack/router-core'
-import { createEffect, createSignal, } from 'solid-js'
+import { createEffect, createSignal } from 'solid-js'
 import * as Solid from 'solid-js'
 import { useMatch } from './useMatch'
 import { useRouter } from './useRouter'
-import type { ParsedLocation} from '@tanstack/router-core'
+import type { ParsedLocation } from '@tanstack/router-core'
 import { useRouterState } from './useRouterState'
 
 export function useActiveLocation(location?: ParsedLocation) {
   const router = useRouter()
-  const [activeLocation, setActiveLocation] = createSignal<ParsedLocation>(location ?? useRouterState({select: (state) => state.location})());
-  const [customActiveLocation, _setCustomActiveLocation] = createSignal<ParsedLocation>(location ?? useRouterState({select: (state) => state.location})());
-  const [useCustomActiveLocation, setUseCustomActiveLocation] = createSignal(!!location);
+  const [activeLocation, setActiveLocation] = createSignal<ParsedLocation>(
+    location ?? useRouterState({ select: (state) => state.location })(),
+  )
+  const [customActiveLocation, _setCustomActiveLocation] =
+    createSignal<ParsedLocation>(
+      location ?? useRouterState({ select: (state) => state.location })(),
+    )
+  const [useCustomActiveLocation, setUseCustomActiveLocation] =
+    createSignal(!!location)
 
   createEffect(() => {
     if (!useCustomActiveLocation()) {
-      setActiveLocation(useRouterState({select: (state) => state.location}))
+      setActiveLocation(useRouterState({ select: (state) => state.location }))
     } else {
       setActiveLocation(customActiveLocation())
     }
@@ -30,15 +36,22 @@ export function useActiveLocation(location?: ParsedLocation) {
     select: (match) => match.index,
   })
 
-  const getFromPath = (from?: string) => Solid.createMemo(() => {
-    const currentRouteMatches = router.matchRoutes(activeLocation(), {
-      _buildLocation: false,
-    })
+  const getFromPath = (from?: string) =>
+    Solid.createMemo(() => {
+      const currentRouteMatches = router.matchRoutes(activeLocation(), {
+        _buildLocation: false,
+      })
 
-    return from ??
-      last(currentRouteMatches)?.fullPath ??
-      router.state.matches[matchIndex()]!.fullPath
-  })
+      return (
+        from ??
+        last(currentRouteMatches)?.fullPath ??
+        router.state.matches[matchIndex()]!.fullPath
+      )
+    })
 
-  return { activeLocation, getFromPath, setActiveLocation: setCustomActiveLocation }
+  return {
+    activeLocation,
+    getFromPath,
+    setActiveLocation: setCustomActiveLocation,
+  }
 }
diff --git a/packages/solid-router/src/useNavigate.tsx b/packages/solid-router/src/useNavigate.tsx
index 9ba94d9faba..0a7f7437531 100644
--- a/packages/solid-router/src/useNavigate.tsx
+++ b/packages/solid-router/src/useNavigate.tsx
@@ -17,7 +17,9 @@ export function useNavigate<
 }): UseNavigateResult<TDefaultFrom> {
   const router = useRouter()
 
-  const {getFromPath, setActiveLocation} = useActiveLocation(router.latestLocation);
+  const { getFromPath, setActiveLocation } = useActiveLocation(
+    router.latestLocation,
+  )
 
   return ((options: NavigateOptions) => {
     setActiveLocation(router.latestLocation)
@@ -25,7 +27,7 @@ export function useNavigate<
 
     return router.navigate({
       ...options,
-      from: from()
+      from: from(),
     })
   }) as UseNavigateResult<TDefaultFrom>
 }

From 849352f58dd63ed56a4dd074a626cdf6792573c9 Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Tue, 19 Aug 2025 22:25:00 +0200
Subject: [PATCH 23/34] formatting

---
 packages/solid-router/src/useActiveLocation.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/solid-router/src/useActiveLocation.ts b/packages/solid-router/src/useActiveLocation.ts
index 111b7082dda..1a622ba31fc 100644
--- a/packages/solid-router/src/useActiveLocation.ts
+++ b/packages/solid-router/src/useActiveLocation.ts
@@ -3,8 +3,8 @@ import { createEffect, createSignal } from 'solid-js'
 import * as Solid from 'solid-js'
 import { useMatch } from './useMatch'
 import { useRouter } from './useRouter'
-import type { ParsedLocation } from '@tanstack/router-core'
 import { useRouterState } from './useRouterState'
+import type { ParsedLocation } from '@tanstack/router-core'
 
 export function useActiveLocation(location?: ParsedLocation) {
   const router = useRouter()

From 4f52e46f8a94510f82cb38d7e1fb34f81f6c7bca Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Wed, 20 Aug 2025 01:00:28 +0200
Subject: [PATCH 24/34] refactor based on coderabbit recommendations

---
 packages/react-router/src/link.tsx            | 10 ++++-
 .../react-router/src/useActiveLocation.ts     | 40 +++++++----------
 .../solid-router/src/useActiveLocation.ts     | 45 ++++++++-----------
 3 files changed, 41 insertions(+), 54 deletions(-)

diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index 32bf1c76fac..cd5171df071 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -99,7 +99,13 @@ export function useLinkProps<
     structuralSharing: true as any,
   })
 
-  const { getFromPath, activeLocation } = useActiveLocation()
+  // subscribe to location here to re-build fromPath if it changes
+  const routerLocation = useRouterState({
+    select: (s) => s.location,
+    structuralSharing: true as any,
+  })
+
+  const { getFromPath } = useActiveLocation()
 
   const from = getFromPath(options.from)
 
@@ -110,7 +116,7 @@ export function useLinkProps<
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       router,
-      activeLocation,
+      routerLocation,
       currentSearch,
       from,
       options._fromLocation,
diff --git a/packages/react-router/src/useActiveLocation.ts b/packages/react-router/src/useActiveLocation.ts
index 52b212e6b08..7adfdd6b03e 100644
--- a/packages/react-router/src/useActiveLocation.ts
+++ b/packages/react-router/src/useActiveLocation.ts
@@ -2,35 +2,25 @@ import { last } from '@tanstack/router-core'
 import { useCallback, useEffect, useState } from 'react'
 import { useRouter } from './useRouter'
 import { useMatch } from './useMatch'
-import type { AnyRouteMatch, ParsedLocation } from '@tanstack/router-core'
+import { useRouterState } from './useRouterState'
+import type { ParsedLocation } from '@tanstack/router-core'
 
-export type UseLocationResult = {
-  activeLocationMatch: AnyRouteMatch | undefined
+export type UseActiveLocationResult = {
+  activeLocation: ParsedLocation
   getFromPath: (from?: string) => string
+  setActiveLocation: (location?: ParsedLocation) => void
 }
 
-export const useActiveLocation = (location?: ParsedLocation) => {
-  const { matchRoutes, state } = useRouter()
-  const [activeLocation, setActiveLocation] = useState<ParsedLocation>(
-    location ?? state.location,
-  )
-  const [customActiveLocation, _setCustomActiveLocation] =
-    useState<ParsedLocation>(location ?? state.location)
-  const [useCustomActiveLocation, setUseCustomActiveLocation] =
-    useState(!!location)
+export const useActiveLocation = (location?: ParsedLocation): UseActiveLocationResult => {
+  const router = useRouter()
+  const routerLocation = useRouterState({select: (state) => state.location})
+  const [activeLocation, setActiveLocation] = useState<ParsedLocation>(location ?? routerLocation)
+  const [customActiveLocation, setCustomActiveLocation] = useState<ParsedLocation | undefined>(location)
 
   useEffect(() => {
-    if (!useCustomActiveLocation) {
-      setActiveLocation(state.location)
-    } else {
-      setActiveLocation(customActiveLocation)
-    }
-  }, [state.location, useCustomActiveLocation, customActiveLocation])
-
-  const setCustomActiveLocation = (location: ParsedLocation) => {
-    _setCustomActiveLocation(location)
-    setUseCustomActiveLocation(true)
-  }
+    setActiveLocation(customActiveLocation ?? routerLocation)
+  }, [routerLocation, customActiveLocation])
+
 
   const currentRouteMatch = useMatch({
     strict: false,
@@ -39,7 +29,7 @@ export const useActiveLocation = (location?: ParsedLocation) => {
 
   const getFromPath = useCallback(
     (from?: string) => {
-      const activeLocationMatches = matchRoutes(activeLocation, {
+      const activeLocationMatches = router.matchRoutes(activeLocation, {
         _buildLocation: false,
       })
 
@@ -47,7 +37,7 @@ export const useActiveLocation = (location?: ParsedLocation) => {
 
       return from ?? activeLocationMatch?.fullPath ?? currentRouteMatch.fullPath
     },
-    [activeLocation, currentRouteMatch.fullPath, matchRoutes],
+    [activeLocation, currentRouteMatch.fullPath, router],
   )
 
   return {
diff --git a/packages/solid-router/src/useActiveLocation.ts b/packages/solid-router/src/useActiveLocation.ts
index 1a622ba31fc..a2f7e5b0aa2 100644
--- a/packages/solid-router/src/useActiveLocation.ts
+++ b/packages/solid-router/src/useActiveLocation.ts
@@ -1,51 +1,42 @@
 import { last } from '@tanstack/router-core'
-import { createEffect, createSignal } from 'solid-js'
-import * as Solid from 'solid-js'
+import {  createEffect, createMemo, createSignal } from 'solid-js'
 import { useMatch } from './useMatch'
 import { useRouter } from './useRouter'
 import { useRouterState } from './useRouterState'
+import type {Accessor} from 'solid-js';
 import type { ParsedLocation } from '@tanstack/router-core'
 
-export function useActiveLocation(location?: ParsedLocation) {
+export type UseLocationResult = {
+  activeLocation: Accessor<ParsedLocation>
+  getFromPath: (from?: string) => Accessor<string>
+  setActiveLocation: (location?: ParsedLocation) => void
+}
+
+export function useActiveLocation(location?: ParsedLocation): UseLocationResult {
   const router = useRouter()
-  const [activeLocation, setActiveLocation] = createSignal<ParsedLocation>(
-    location ?? useRouterState({ select: (state) => state.location })(),
-  )
-  const [customActiveLocation, _setCustomActiveLocation] =
-    createSignal<ParsedLocation>(
-      location ?? useRouterState({ select: (state) => state.location })(),
-    )
-  const [useCustomActiveLocation, setUseCustomActiveLocation] =
-    createSignal(!!location)
+  // we are not using a variable here for router state location since we need to only calculate that if the location is not passed in. It can result in unnecessary history actions if we do that.
+  const [activeLocation, setActiveLocation] = createSignal<ParsedLocation>(location ?? useRouterState({select: s => s.location})())
+  const [customActiveLocation, setCustomActiveLocation] = createSignal<ParsedLocation | undefined>(location)
 
   createEffect(() => {
-    if (!useCustomActiveLocation()) {
-      setActiveLocation(useRouterState({ select: (state) => state.location }))
-    } else {
-      setActiveLocation(customActiveLocation())
-    }
+    setActiveLocation(customActiveLocation() ?? useRouterState({select: s => s.location})())
   })
 
-  const setCustomActiveLocation = (location: ParsedLocation) => {
-    _setCustomActiveLocation(location)
-    setUseCustomActiveLocation(true)
-  }
-
-  const matchIndex = useMatch({
+  const currentRouteMatch = useMatch({
     strict: false,
-    select: (match) => match.index,
+    select: (match) => match,
   })
 
   const getFromPath = (from?: string) =>
-    Solid.createMemo(() => {
-      const currentRouteMatches = router.matchRoutes(activeLocation(), {
+    createMemo(() => {
+      const currentRouteMatches = router.matchRoutes(customActiveLocation() ?? activeLocation(), {
         _buildLocation: false,
       })
 
       return (
         from ??
         last(currentRouteMatches)?.fullPath ??
-        router.state.matches[matchIndex()]!.fullPath
+        currentRouteMatch().fullPath
       )
     })
 

From 1b386b891379f62bd9baee5455006114d31305b0 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Tue, 19 Aug 2025 23:01:27 +0000
Subject: [PATCH 25/34] ci: apply automated fixes

---
 .../react-router/src/useActiveLocation.ts     | 15 ++++++----
 .../solid-router/src/useActiveLocation.ts     | 29 +++++++++++++------
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/react-router/src/useActiveLocation.ts b/packages/react-router/src/useActiveLocation.ts
index 7adfdd6b03e..43e141acaea 100644
--- a/packages/react-router/src/useActiveLocation.ts
+++ b/packages/react-router/src/useActiveLocation.ts
@@ -11,17 +11,22 @@ export type UseActiveLocationResult = {
   setActiveLocation: (location?: ParsedLocation) => void
 }
 
-export const useActiveLocation = (location?: ParsedLocation): UseActiveLocationResult => {
+export const useActiveLocation = (
+  location?: ParsedLocation,
+): UseActiveLocationResult => {
   const router = useRouter()
-  const routerLocation = useRouterState({select: (state) => state.location})
-  const [activeLocation, setActiveLocation] = useState<ParsedLocation>(location ?? routerLocation)
-  const [customActiveLocation, setCustomActiveLocation] = useState<ParsedLocation | undefined>(location)
+  const routerLocation = useRouterState({ select: (state) => state.location })
+  const [activeLocation, setActiveLocation] = useState<ParsedLocation>(
+    location ?? routerLocation,
+  )
+  const [customActiveLocation, setCustomActiveLocation] = useState<
+    ParsedLocation | undefined
+  >(location)
 
   useEffect(() => {
     setActiveLocation(customActiveLocation ?? routerLocation)
   }, [routerLocation, customActiveLocation])
 
-
   const currentRouteMatch = useMatch({
     strict: false,
     select: (match) => match,
diff --git a/packages/solid-router/src/useActiveLocation.ts b/packages/solid-router/src/useActiveLocation.ts
index a2f7e5b0aa2..bfbadfec21a 100644
--- a/packages/solid-router/src/useActiveLocation.ts
+++ b/packages/solid-router/src/useActiveLocation.ts
@@ -1,9 +1,9 @@
 import { last } from '@tanstack/router-core'
-import {  createEffect, createMemo, createSignal } from 'solid-js'
+import { createEffect, createMemo, createSignal } from 'solid-js'
 import { useMatch } from './useMatch'
 import { useRouter } from './useRouter'
 import { useRouterState } from './useRouterState'
-import type {Accessor} from 'solid-js';
+import type { Accessor } from 'solid-js'
 import type { ParsedLocation } from '@tanstack/router-core'
 
 export type UseLocationResult = {
@@ -12,14 +12,22 @@ export type UseLocationResult = {
   setActiveLocation: (location?: ParsedLocation) => void
 }
 
-export function useActiveLocation(location?: ParsedLocation): UseLocationResult {
+export function useActiveLocation(
+  location?: ParsedLocation,
+): UseLocationResult {
   const router = useRouter()
   // we are not using a variable here for router state location since we need to only calculate that if the location is not passed in. It can result in unnecessary history actions if we do that.
-  const [activeLocation, setActiveLocation] = createSignal<ParsedLocation>(location ?? useRouterState({select: s => s.location})())
-  const [customActiveLocation, setCustomActiveLocation] = createSignal<ParsedLocation | undefined>(location)
+  const [activeLocation, setActiveLocation] = createSignal<ParsedLocation>(
+    location ?? useRouterState({ select: (s) => s.location })(),
+  )
+  const [customActiveLocation, setCustomActiveLocation] = createSignal<
+    ParsedLocation | undefined
+  >(location)
 
   createEffect(() => {
-    setActiveLocation(customActiveLocation() ?? useRouterState({select: s => s.location})())
+    setActiveLocation(
+      customActiveLocation() ?? useRouterState({ select: (s) => s.location })(),
+    )
   })
 
   const currentRouteMatch = useMatch({
@@ -29,9 +37,12 @@ export function useActiveLocation(location?: ParsedLocation): UseLocationResult
 
   const getFromPath = (from?: string) =>
     createMemo(() => {
-      const currentRouteMatches = router.matchRoutes(customActiveLocation() ?? activeLocation(), {
-        _buildLocation: false,
-      })
+      const currentRouteMatches = router.matchRoutes(
+        customActiveLocation() ?? activeLocation(),
+        {
+          _buildLocation: false,
+        },
+      )
 
       return (
         from ??

From ac761c8f5fc5d5d5b56f6376cefc5da678753d86 Mon Sep 17 00:00:00 2001
From: Nico Lynzaad <nlynzaad@zylangroup.com>
Date: Wed, 20 Aug 2025 01:42:00 +0200
Subject: [PATCH 26/34] resolve test failure

---
 packages/react-router/src/useActiveLocation.ts | 12 ++++++++----
 packages/solid-router/src/useActiveLocation.ts | 12 +++++++-----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/react-router/src/useActiveLocation.ts b/packages/react-router/src/useActiveLocation.ts
index 43e141acaea..c7220fdaca0 100644
--- a/packages/react-router/src/useActiveLocation.ts
+++ b/packages/react-router/src/useActiveLocation.ts
@@ -27,9 +27,9 @@ export const useActiveLocation = (
     setActiveLocation(customActiveLocation ?? routerLocation)
   }, [routerLocation, customActiveLocation])
 
-  const currentRouteMatch = useMatch({
+  const matchIndex = useMatch({
     strict: false,
-    select: (match) => match,
+    select: (match) => match.index,
   })
 
   const getFromPath = useCallback(
@@ -40,9 +40,13 @@ export const useActiveLocation = (
 
       const activeLocationMatch = last(activeLocationMatches)
 
-      return from ?? activeLocationMatch?.fullPath ?? currentRouteMatch.fullPath
+      return (
+        from ??
+        activeLocationMatch?.fullPath ??
+        router.state.matches[matchIndex]!.fullPath
+      )
     },
-    [activeLocation, currentRouteMatch.fullPath, router],
+    [activeLocation, matchIndex, router],
   )
 
   return {
diff --git a/packages/solid-router/src/useActiveLocation.ts b/packages/solid-router/src/useActiveLocation.ts
index bfbadfec21a..268af7296dd 100644
--- a/packages/solid-router/src/useActiveLocation.ts
+++ b/packages/solid-router/src/useActiveLocation.ts
@@ -30,24 +30,26 @@ export function useActiveLocation(
     )
   })
 
-  const currentRouteMatch = useMatch({
+  const matchIndex = useMatch({
     strict: false,
-    select: (match) => match,
+    select: (match) => match.index,
   })
 
   const getFromPath = (from?: string) =>
     createMemo(() => {
-      const currentRouteMatches = router.matchRoutes(
+      const activeLocationMatches = router.matchRoutes(
         customActiveLocation() ?? activeLocation(),
         {
           _buildLocation: false,
         },
       )
 
+      const activeLocationMatch = last(activeLocationMatches)
+
       return (
         from ??
-        last(currentRouteMatches)?.fullPath ??
-        currentRouteMatch().fullPath
+        activeLocationMatch?.fullPath ??
+        router.state.matches[matchIndex()]!.fullPath
       )
     })
 

From aa7c3bafd7ec6ddf0d202ac4eeef9b09e5c1bc16 Mon Sep 17 00:00:00 2001
From: Cory House <housecor@gmail.com>
Date: Sat, 23 Aug 2025 01:01:54 -0500
Subject: [PATCH 27/34] Refine wording in external data loading guide (#5015)

---
 docs/router/framework/react/guide/external-data-loading.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/router/framework/react/guide/external-data-loading.md b/docs/router/framework/react/guide/external-data-loading.md
index 2f7d632b77a..2bf31c19037 100644
--- a/docs/router/framework/react/guide/external-data-loading.md
+++ b/docs/router/framework/react/guide/external-data-loading.md
@@ -34,7 +34,7 @@ Literally any library that **can return a promise and read/write data** can be i
 
 ## Using Loaders to ensure data is loaded
 
-The easiest way to use integrate and external caching/data library into Router is to use `route.loader`s to ensure that the data required inside of a route has been loaded and is ready to be displayed.
+The easiest way to integrate external caching/data library into Router is to use `route.loader`s to ensure that the data required inside of a route has been loaded and is ready to be displayed.
 
 > ⚠️ BUT WHY? It's very important to preload your critical render data in the loader for a few reasons:
 >
@@ -102,7 +102,7 @@ export const Route = createFileRoute('/posts')({
 
 ### Error handling with TanStack Query
 
-When an error occurs while using `suspense` with `TanStack Query`, you'll need to let queries know that you want to try again when re-rendering. This can be done by using the `reset` function provided by the `useQueryErrorResetBoundary` hook. We can invoke this function in an effect as soon as the error component mounts. This will make sure that the query is reset and will try to fetch data again when the route component is rendered again. This will also cover cases where users navigate away from our route instead of clicking the `retry` button.
+When an error occurs while using `suspense` with `TanStack Query`, you need to let queries know that you want to try again when re-rendering. This can be done by using the `reset` function provided by the `useQueryErrorResetBoundary` hook. You can invoke this function in an effect as soon as the error component mounts. This will make sure that the query is reset and will try to fetch data again when the route component is rendered again. This will also cover cases where users navigate away from the route instead of clicking the `retry` button.
 
 ```tsx
 export const Route = createFileRoute('/')({

From e14ee74c7d6352c441fce3a3651d399bebcfc2ce Mon Sep 17 00:00:00 2001
From: Flo <fpellet@ensc.fr>
Date: Sat, 23 Aug 2025 16:26:36 +0200
Subject: [PATCH 28/34] test(react-router): add more variants to store-updates
 test (#5019)

Add a few more setup configurations to measure the number of `__store`
updates:
- with caching (`staleTime > 0`)
- when preloading multiple times the same route (simulates hovering a
list of links to the same page w/ different params)

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../store-updates-during-navigation.test.tsx  | 94 +++++++++++++++++--
 1 file changed, 87 insertions(+), 7 deletions(-)

diff --git a/packages/react-router/tests/store-updates-during-navigation.test.tsx b/packages/react-router/tests/store-updates-during-navigation.test.tsx
index 9a587392748..d68373ff4ee 100644
--- a/packages/react-router/tests/store-updates-during-navigation.test.tsx
+++ b/packages/react-router/tests/store-updates-during-navigation.test.tsx
@@ -31,6 +31,7 @@ function setup({
   scripts,
   defaultPendingMs,
   defaultPendingMinMs,
+  staleTime,
 }: {
   beforeLoad?: () => any
   loader?: () => any
@@ -39,24 +40,26 @@ function setup({
   scripts?: () => any
   defaultPendingMs?: number
   defaultPendingMinMs?: number
+  staleTime?: number
 }) {
   const select = vi.fn()
 
   const rootRoute = createRootRoute({
     component: function RootComponent() {
       useRouterState({ select })
-      return <Outlet />
+      return (
+        <>
+          <Link to="/">Back</Link>
+          <Link to="/posts">Posts</Link>
+          <Outlet />
+        </>
+      )
     },
   })
   const indexRoute = createRoute({
     getParentRoute: () => rootRoute,
     path: '/',
-    component: () => (
-      <>
-        <h1>Index</h1>
-        <Link to="/posts">Posts</Link>
-      </>
-    ),
+    component: () => <h1>Index</h1>,
   })
 
   const postsRoute = createRoute({
@@ -83,6 +86,8 @@ function setup({
     defaultPendingComponent: () => <p>Loading...</p>,
     defaultNotFoundComponent: () => <h1>Not Found Title</h1>,
     defaultPreload: 'intent',
+    defaultStaleTime: staleTime,
+    defaultGcTime: staleTime,
   })
 
   render(<RouterProvider router={router} />)
@@ -90,6 +95,15 @@ function setup({
   return { select, router }
 }
 
+async function back() {
+  const link = await waitFor(() => screen.getByRole('link', { name: 'Back' }))
+  fireEvent.click(link)
+  const title = await waitFor(() =>
+    screen.getByRole('heading', { name: /Index/ }),
+  )
+  expect(title).toBeInTheDocument()
+}
+
 async function run({ select }: ReturnType<typeof setup>) {
   // navigate to /posts
   const link = await waitFor(() => screen.getByRole('link', { name: 'Posts' }))
@@ -211,4 +225,70 @@ describe("Store doesn't update *too many* times during navigation", () => {
     // Any change that increases this number should be investigated.
     expect(updates).toBe(14)
   })
+
+  test('navigate, w/ preloaded & async loaders', async () => {
+    const params = setup({
+      beforeLoad: () => Promise.resolve({ foo: 'bar' }),
+      loader: () => resolveAfter(100, { hello: 'world' }),
+      staleTime: 1000,
+    })
+
+    await params.router.preloadRoute({ to: '/posts' })
+    const updates = await run(params)
+
+    // This number should be as small as possible to minimize the amount of work
+    // that needs to be done during a navigation.
+    // Any change that increases this number should be investigated.
+    expect(updates).toBe(7)
+  })
+
+  test('navigate, w/ preloaded & sync loaders', async () => {
+    const params = setup({
+      beforeLoad: () => ({ foo: 'bar' }),
+      loader: () => ({ hello: 'world' }),
+      staleTime: 1000,
+    })
+
+    await params.router.preloadRoute({ to: '/posts' })
+    const updates = await run(params)
+
+    // This number should be as small as possible to minimize the amount of work
+    // that needs to be done during a navigation.
+    // Any change that increases this number should be investigated.
+    expect(updates).toBe(6)
+  })
+
+  test('navigate, w/ previous navigation & async loader', async () => {
+    const params = setup({
+      loader: () => resolveAfter(100, { hello: 'world' }),
+      staleTime: 1000,
+    })
+
+    await run(params)
+    await back()
+    const updates = await run(params)
+
+    // This number should be as small as possible to minimize the amount of work
+    // that needs to be done during a navigation.
+    // Any change that increases this number should be investigated.
+    expect(updates).toBe(5)
+  })
+
+  test('preload a preloaded route w/ async loader', async () => {
+    const params = setup({
+      loader: () => resolveAfter(100, { hello: 'world' }),
+    })
+
+    await params.router.preloadRoute({ to: '/posts' })
+    await new Promise((r) => setTimeout(r, 20))
+    const before = params.select.mock.calls.length
+    await params.router.preloadRoute({ to: '/posts' })
+    const after = params.select.mock.calls.length
+    const updates = after - before
+
+    // This number should be as small as possible to minimize the amount of work
+    // that needs to be done during a navigation.
+    // Any change that increases this number should be investigated.
+    expect(updates).toBe(1)
+  })
 })

From fd01f2c29e89ab6d76d36f91fb735992d4b662cb Mon Sep 17 00:00:00 2001
From: Lee <leesb971204@gmail.com>
Date: Mon, 25 Aug 2025 05:35:00 +0900
Subject: [PATCH 29/34] docs: add guide for edit docs and preview in local
 (#5005)

---
 CONTRIBUTING.md | 58 ++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 55 insertions(+), 3 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 5650aafc088..c28d01241bf 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -23,6 +23,58 @@
   - `pnpm dev`
 - Make changes to the code
   - If you ran `pnpm dev` the dev watcher will automatically rebuild the code that has changed
-- Changes to the docs
-  - Be sure that internal links are written always relative to `docs` folder.
-    E.g. `./guide/data-loading`
+- Editing the docs locally and previewing the changes
+  - The documentations for all the TanStack projects are hosted on [tanstack.com](https://tanstack.com), which is a TanStack Start application (https://github.com/TanStack/tanstack.com). You need to run this app locally to preview your changes in the `TanStack/router` docs.
+
+> [!NOTE]
+> The website fetches the doc pages from GitHub in production, and searches for them at `../router/docs` in development. Your local clone of `TanStack/router` needs to be in the same directory as the local clone of `TanStack/tanstack.com`.
+
+You can follow these steps to set up the docs for local development:
+
+1. Make a new directory called `tanstack`.
+
+```sh
+mkdir tanstack
+```
+
+2. Enter that directory and clone the [`TanStack/router`](https://github.com/TanStack/router) and [`TanStack/tanstack.com`](https://github.com/TanStack/tanstack.com) repos.
+
+```sh
+cd tanstack
+git clone git@github.com:TanStack/router.git
+# We probably don't need all the branches and commit history
+# from the `tanstack.com` repo, so let's just create a shallow
+# clone of the latest version of the `main` branch.
+# Read more about shallow clones here:
+# https://github.blog/2020-12-21-get-up-to-speed-with-partial-clone-and-shallow-clone/#user-content-shallow-clones
+git clone git@github.com:TanStack/tanstack.com.git --depth=1 --single-branch --branch=main
+```
+
+> [!NOTE]
+> Your `tanstack` directory should look like this:
+>
+> ```
+> tanstack/
+>    |
+>    +-- router/ (<-- this directory cannot be called anything else!)
+>    |
+>    +-- tanstack.com/
+> ```
+
+3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode:
+
+```sh
+cd tanstack.com
+pnpm i
+# The app will run on https://localhost:3000 by default
+pnpm dev
+```
+
+4. Now you can visit http://localhost:3000/router/latest/docs/framework/react/overview in the browser and see the changes you make in `tanstack/router/docs` there.
+
+> [!WARNING]
+> You will need to update the `docs/(router or start)config.json` file (in `TanStack/router`) if you add a new documentation page!
+
+You can see the whole process in the screen capture below:
+
+https://github.com/fulopkovacs/form/assets/43729152/9d35a3c3-8153-4e74-9cb2-af275f7a269b

From 1c8c9a2e1a9b6eb6db1d9022695091beb4cbb0b7 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Thu, 28 Aug 2025 09:49:31 -0600
Subject: [PATCH 30/34] Update packages/router-core/src/location.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 packages/router-core/src/location.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/router-core/src/location.ts b/packages/router-core/src/location.ts
index a14df74e6d8..9fe4e6f17d4 100644
--- a/packages/router-core/src/location.ts
+++ b/packages/router-core/src/location.ts
@@ -14,7 +14,7 @@ export interface ParsedLocation<TSearchObj extends AnySchema = {}> {
    * represent the full URL, including the origin. As a replacement,
    * please upgrade to the new `fullPath` property, which is derived by
    * combining `pathname`, `search`, and `hash`. like so:
-   * `${pathname}${searchStr}${hash}`. If you'r looking for the actual
+   * `${pathname}${searchStr}${hash}`. If you're looking for the actual
    * `href` of the location, you can use the `location.url.href` property.
    */
   href: string

From 16a4637284f5e03705d9f4c87ee1c293878751e5 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Thu, 28 Aug 2025 18:20:43 -0600
Subject: [PATCH 31/34] fix and fix tests

---
 packages/react-router/src/Match.tsx           |   2 +-
 packages/react-router/src/link.tsx            |   4 +-
 packages/react-router/tests/redirect.test.tsx |   2 +
 packages/react-router/tests/router.test.tsx   | 102 ++++++++----------
 packages/router-core/src/router.ts            |  10 +-
 packages/solid-router/src/link.tsx            |   4 +-
 packages/solid-router/tests/redirect.test.tsx |   2 +
 packages/solid-router/tests/router.test.tsx   |  56 ++++------
 8 files changed, 82 insertions(+), 100 deletions(-)

diff --git a/packages/react-router/src/Match.tsx b/packages/react-router/src/Match.tsx
index 117299d4b0f..3956dc47559 100644
--- a/packages/react-router/src/Match.tsx
+++ b/packages/react-router/src/Match.tsx
@@ -167,7 +167,7 @@ function OnRendered() {
         if (
           el &&
           (prevLocationRef.current === undefined ||
-            prevLocationRef.current.href !== router.latestLocation.href)
+            prevLocationRef.current.fullPath !== router.latestLocation.fullPath)
         ) {
           router.emit({
             type: 'onRendered',
diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index cd5171df071..615dcf4fccf 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -351,8 +351,8 @@ export function useLinkProps<
     href: disabled
       ? undefined
       : next.maskedLocation
-        ? next.maskedLocation.url.href
-        : next.url.href,
+        ? next.maskedLocation.fullPath
+        : next.fullPath,
     ref: innerRef as React.ComponentPropsWithRef<'a'>['ref'],
     onClick: composeHandlers([onClick, handleClick]),
     onFocus: composeHandlers([onFocus, handleFocus]),
diff --git a/packages/react-router/tests/redirect.test.tsx b/packages/react-router/tests/redirect.test.tsx
index 3009c9ddd1e..9ea86f402a3 100644
--- a/packages/react-router/tests/redirect.test.tsx
+++ b/packages/react-router/tests/redirect.test.tsx
@@ -357,6 +357,7 @@ describe('redirect', () => {
       expect(currentRedirect.headers.get('Location')).toEqual('/about')
       expect(currentRedirect.options).toEqual({
         _fromLocation: {
+          fullPath: '/',
           hash: '',
           href: '/',
           pathname: '/',
@@ -367,6 +368,7 @@ describe('redirect', () => {
             __TSR_key: currentRedirect.options._fromLocation!.state.__TSR_key,
             key: currentRedirect.options._fromLocation!.state.key,
           },
+          url: new URL('http://localhost/'),
         },
         href: '/about',
         to: '/about',
diff --git a/packages/react-router/tests/router.test.tsx b/packages/react-router/tests/router.test.tsx
index ef8bc2e7734..725db69cbbc 100644
--- a/packages/react-router/tests/router.test.tsx
+++ b/packages/react-router/tests/router.test.tsx
@@ -326,57 +326,57 @@ function createTestRouter(
 }
 
 describe('encoding: URL param segment for /posts/$slug', () => {
-  it('state.location.pathname, should have the params.slug value of "tanner"', async () => {
+  it('state.location.url.pathname, should have the params.slug value of "tanner"', async () => {
     const { router } = createTestRouter({
       history: createMemoryHistory({ initialEntries: ['/posts/tanner'] }),
     })
 
     await act(() => router.load())
 
-    expect(router.state.location.pathname).toBe('/posts/tanner')
+    expect(router.state.location.url.pathname).toBe('/posts/tanner')
   })
 
-  it('state.location.pathname, should have the params.slug value of "🚀"', async () => {
+  it('state.location.url.pathname, should have the params.slug value of "🚀"', async () => {
     const { router } = createTestRouter({
       history: createMemoryHistory({ initialEntries: ['/posts/🚀'] }),
     })
 
     await act(() => router.load())
 
-    expect(router.state.location.pathname).toBe('/posts/🚀')
+    expect(router.state.location.url.pathname).toBe('/posts/%F0%9F%9A%80')
   })
 
-  it('state.location.pathname, should have the params.slug value of "100%25"', async () => {
+  it('state.location.url.pathname, should have the params.slug value of "100%25"', async () => {
     const { router } = createTestRouter({
       history: createMemoryHistory({ initialEntries: ['/posts/100%25'] }),
     })
 
     await act(() => router.load())
 
-    expect(router.state.location.pathname).toBe('/posts/100%25')
+    expect(router.state.location.url.pathname).toBe('/posts/100%25')
   })
 
-  it('state.location.pathname, should have the params.slug value of "100%26"', async () => {
+  it('state.location.url.pathname, should have the params.slug value of "100%26"', async () => {
     const { router } = createTestRouter({
       history: createMemoryHistory({ initialEntries: ['/posts/100%26'] }),
     })
 
     await act(() => router.load())
 
-    expect(router.state.location.pathname).toBe('/posts/100%26')
+    expect(router.state.location.url.pathname).toBe('/posts/100%26')
   })
 
-  it('state.location.pathname, should have the params.slug value of "%F0%9F%9A%80"', async () => {
+  it('state.location.url.pathname, should have the params.slug value of "%F0%9F%9A%80"', async () => {
     const { router } = createTestRouter({
       history: createMemoryHistory({ initialEntries: ['/posts/%F0%9F%9A%80'] }),
     })
 
     await act(() => router.load())
 
-    expect(router.state.location.pathname).toBe('/posts/%F0%9F%9A%80')
+    expect(router.state.location.url.pathname).toBe('/posts/%F0%9F%9A%80')
   })
 
-  it('state.location.pathname, should have the params.slug value of "framework%2Freact%2Fguide%2Ffile-based-routing%20tanstack"', async () => {
+  it('state.location.url.pathname, should have the params.slug value of "framework%2Freact%2Fguide%2Ffile-based-routing%20tanstack"', async () => {
     const { router } = createTestRouter({
       history: createMemoryHistory({
         initialEntries: [
@@ -387,7 +387,7 @@ describe('encoding: URL param segment for /posts/$slug', () => {
 
     await act(() => router.load())
 
-    expect(router.state.location.pathname).toBe(
+    expect(router.state.location.url.pathname).toBe(
       '/posts/framework%2Freact%2Fguide%2Ffile-based-routing%20tanstack',
     )
   })
@@ -554,7 +554,7 @@ describe('encoding: URL param segment for /posts/$slug', () => {
       router.navigate({ to: '/posts/$slug', params: { slug: '@jane' } }),
     )
 
-    expect(router.state.location.pathname).toBe('/posts/%40jane')
+    expect(router.state.location.url.pathname).toBe('/posts/%40jane')
   })
 
   it('params.slug should be encoded in the final URL except characters in pathParamsAllowedCharacters', async () => {
@@ -570,62 +570,62 @@ describe('encoding: URL param segment for /posts/$slug', () => {
       router.navigate({ to: '/posts/$slug', params: { slug: '@jane' } }),
     )
 
-    expect(router.state.location.pathname).toBe('/posts/@jane')
+    expect(router.state.location.url.pathname).toBe('/posts/@jane')
   })
 })
 
 describe('encoding: URL splat segment for /$', () => {
-  it('state.location.pathname, should have the params._splat value of "tanner"', async () => {
+  it('state.location.url.pathname, should have the params._splat value of "tanner"', async () => {
     const { router } = createTestRouter({
       history: createMemoryHistory({ initialEntries: ['/tanner'] }),
     })
 
     await router.load()
 
-    expect(router.state.location.pathname).toBe('/tanner')
+    expect(router.state.location.url.pathname).toBe('/tanner')
   })
 
-  it('state.location.pathname, should have the params._splat value of "🚀"', async () => {
+  it('state.location.url.pathname, should have the params._splat value of "🚀"', async () => {
     const { router } = createTestRouter({
       history: createMemoryHistory({ initialEntries: ['/🚀'] }),
     })
 
     await router.load()
 
-    expect(router.state.location.pathname).toBe('/🚀')
+    expect(router.state.location.url.pathname).toBe('/%F0%9F%9A%80')
   })
 
-  it('state.location.pathname, should have the params._splat value of "100%25"', async () => {
+  it('state.location.url.pathname, should have the params._splat value of "100%25"', async () => {
     const { router } = createTestRouter({
       history: createMemoryHistory({ initialEntries: ['/100%25'] }),
     })
 
     await router.load()
 
-    expect(router.state.location.pathname).toBe('/100%25')
+    expect(router.state.location.url.pathname).toBe('/100%25')
   })
 
-  it('state.location.pathname, should have the params._splat value of "100%26"', async () => {
+  it('state.location.url.pathname, should have the params._splat value of "100%26"', async () => {
     const { router } = createTestRouter({
       history: createMemoryHistory({ initialEntries: ['/100%26'] }),
     })
 
     await router.load()
 
-    expect(router.state.location.pathname).toBe('/100%26')
+    expect(router.state.location.url.pathname).toBe('/100%26')
   })
 
-  it('state.location.pathname, should have the params._splat value of "%F0%9F%9A%80"', async () => {
+  it('state.location.url.pathname, should have the params._splat value of "%F0%9F%9A%80"', async () => {
     const { router } = createTestRouter({
       history: createMemoryHistory({ initialEntries: ['/%F0%9F%9A%80'] }),
     })
 
     await router.load()
 
-    expect(router.state.location.pathname).toBe('/%F0%9F%9A%80')
+    expect(router.state.location.url.pathname).toBe('/%F0%9F%9A%80')
   })
 
-  it('state.location.pathname, should have the params._splat value of "framework%2Freact%2Fguide%2Ffile-based-routing%20tanstack"', async () => {
+  it('state.location.url.pathname, should have the params._splat value of "framework%2Freact%2Fguide%2Ffile-based-routing%20tanstack"', async () => {
     const { router } = createTestRouter({
       history: createMemoryHistory({
         initialEntries: [
@@ -636,12 +636,12 @@ describe('encoding: URL splat segment for /$', () => {
 
     await router.load()
 
-    expect(router.state.location.pathname).toBe(
+    expect(router.state.location.url.pathname).toBe(
       '/framework%2Freact%2Fguide%2Ffile-based-routing%20tanstack',
     )
   })
 
-  it('state.location.pathname, should have the params._splat value of "framework/react/guide/file-based-routing tanstack"', async () => {
+  it('state.location.url.pathname, should have the params._splat value of "framework/react/guide/file-based-routing tanstack"', async () => {
     const { router } = createTestRouter({
       history: createMemoryHistory({
         initialEntries: ['/framework/react/guide/file-based-routing tanstack'],
@@ -650,8 +650,8 @@ describe('encoding: URL splat segment for /$', () => {
 
     await router.load()
 
-    expect(router.state.location.pathname).toBe(
-      '/framework/react/guide/file-based-routing tanstack',
+    expect(router.state.location.url.pathname).toBe(
+      '/framework/react/guide/file-based-routing%20tanstack',
     )
   })
 
@@ -736,12 +736,11 @@ describe('encoding: URL path segment', () => {
   it.each([
     {
       input: '/path-segment/%C3%A9',
-      output: '/path-segment/é',
-      type: 'encoded',
+      output: '/path-segment/%C3%A9',
     },
     {
       input: '/path-segment/é',
-      output: '/path-segment/é',
+      output: '/path-segment/%C3%A9',
       type: 'not encoded',
     },
     {
@@ -761,53 +760,46 @@ describe('encoding: URL path segment', () => {
     },
     {
       input: '/path-segment/%F0%9F%9A%80',
-      output: '/path-segment/🚀',
-      type: 'encoded',
+      output: '/path-segment/%F0%9F%9A%80',
     },
     {
       input: '/path-segment/%F0%9F%9A%80to%2Fthe%2Fmoon',
-      output: '/path-segment/🚀to%2Fthe%2Fmoon',
-      type: 'encoded',
+      output: '/path-segment/%F0%9F%9A%80to%2Fthe%2Fmoon',
     },
     {
       input: '/path-segment/%25%F0%9F%9A%80to%2Fthe%2Fmoon',
-      output: '/path-segment/%25🚀to%2Fthe%2Fmoon',
-      type: 'encoded',
+      output: '/path-segment/%25%F0%9F%9A%80to%2Fthe%2Fmoon',
     },
     {
       input: '/path-segment/%F0%9F%9A%80to%2Fthe%2Fmoon%25',
-      output: '/path-segment/🚀to%2Fthe%2Fmoon%25',
-      type: 'encoded',
+      output: '/path-segment/%F0%9F%9A%80to%2Fthe%2Fmoon%25',
     },
     {
       input:
         '/path-segment/%F0%9F%9A%80to%2Fthe%2Fmoon%25%F0%9F%9A%80to%2Fthe%2Fmoon',
-      output: '/path-segment/🚀to%2Fthe%2Fmoon%25🚀to%2Fthe%2Fmoon',
-      type: 'encoded',
+      output:
+        '/path-segment/%F0%9F%9A%80to%2Fthe%2Fmoon%25%F0%9F%9A%80to%2Fthe%2Fmoon',
     },
     {
       input: '/path-segment/🚀',
-      output: '/path-segment/🚀',
+      output: '/path-segment/%F0%9F%9A%80',
       type: 'not encoded',
     },
     {
       input: '/path-segment/🚀to%2Fthe%2Fmoon',
-      output: '/path-segment/🚀to%2Fthe%2Fmoon',
+      output: '/path-segment/%F0%9F%9A%80to%2Fthe%2Fmoon',
       type: 'not encoded',
     },
-  ])(
-    'should resolve $input to $output when the path segment is $type',
-    async ({ input, output }) => {
-      const { router } = createTestRouter({
-        history: createMemoryHistory({ initialEntries: [input] }),
-      })
+  ])('should resolve $input to $output', async ({ input, output }) => {
+    const { router } = createTestRouter({
+      history: createMemoryHistory({ initialEntries: [input] }),
+    })
 
-      render(<RouterProvider router={router} />)
-      await act(() => router.load())
+    render(<RouterProvider router={router} />)
+    await act(() => router.load())
 
-      expect(router.state.location.pathname).toBe(output)
-    },
-  )
+    expect(router.state.location.url.pathname).toBe(output)
+  })
 })
 
 describe('router emits events during rendering', () => {
diff --git a/packages/router-core/src/router.ts b/packages/router-core/src/router.ts
index 08d456f1640..04e7ded4b96 100644
--- a/packages/router-core/src/router.ts
+++ b/packages/router-core/src/router.ts
@@ -1754,7 +1754,7 @@ export class RouterCore<
       return isEqual
     }
 
-    const isSameUrl = this.latestLocation.href === next.href
+    const isSameUrl = this.latestLocation.fullPath === next.fullPath
 
     const previousCommitPromise = this.commitLocationPromise
     this.commitLocationPromise = createControlledPromise<void>(() => {
@@ -1893,7 +1893,7 @@ export class RouterCore<
     if (this.isServer) {
       // for SPAs on the initial load, this is handled by the Transitioner
       const nextLocation = this.buildLocation({
-        to: this.latestLocation.pathname,
+        to: this.latestLocation.url.pathname,
         search: true,
         params: true,
         hash: true,
@@ -1912,10 +1912,10 @@ export class RouterCore<
       }
 
       if (
-        trimPath(normalizeUrl(this.latestLocation.href)) !==
-        trimPath(normalizeUrl(nextLocation.href))
+        trimPath(normalizeUrl(this.latestLocation.fullPath)) !==
+        trimPath(normalizeUrl(nextLocation.fullPath))
       ) {
-        throw redirect({ href: nextLocation.href })
+        throw redirect({ href: nextLocation.url.href })
       }
     }
     // Match the routes
diff --git a/packages/solid-router/src/link.tsx b/packages/solid-router/src/link.tsx
index 4b2434627b1..5e08fe73d12 100644
--- a/packages/solid-router/src/link.tsx
+++ b/packages/solid-router/src/link.tsx
@@ -391,8 +391,8 @@ export function useLinkProps<
     return _options().disabled
       ? undefined
       : maskedLocation
-        ? maskedLocation.url.href
-        : nextLocation?.url.href
+        ? maskedLocation.fullPath
+        : nextLocation?.fullPath
   })
 
   return Solid.mergeProps(
diff --git a/packages/solid-router/tests/redirect.test.tsx b/packages/solid-router/tests/redirect.test.tsx
index d30265d70a3..941dec9909c 100644
--- a/packages/solid-router/tests/redirect.test.tsx
+++ b/packages/solid-router/tests/redirect.test.tsx
@@ -351,6 +351,7 @@ describe('redirect', () => {
     expect(currentRedirect.headers.get('Location')).toEqual('/about')
     expect(currentRedirect.options).toEqual({
       _fromLocation: {
+        fullPath: '/',
         hash: '',
         href: '/',
         pathname: '/',
@@ -361,6 +362,7 @@ describe('redirect', () => {
           __TSR_key: currentRedirect.options._fromLocation!.state.__TSR_key,
           key: currentRedirect.options._fromLocation!.state.key,
         },
+        url: new URL('http://localhost/'),
       },
       href: '/about',
       to: '/about',
diff --git a/packages/solid-router/tests/router.test.tsx b/packages/solid-router/tests/router.test.tsx
index d0a04bfa51e..31a94432061 100644
--- a/packages/solid-router/tests/router.test.tsx
+++ b/packages/solid-router/tests/router.test.tsx
@@ -333,7 +333,7 @@ describe('encoding: URL param segment for /posts/$slug', () => {
 
     await router.load()
 
-    expect(router.state.location.pathname).toBe('/posts/🚀')
+    expect(router.state.location.pathname).toBe('/posts/%F0%9F%9A%80')
   })
 
   it('state.location.pathname, should have the params.slug value of "100%25"', async () => {
@@ -578,7 +578,7 @@ describe('encoding: URL splat segment for /$', () => {
 
     await router.load()
 
-    expect(router.state.location.pathname).toBe('/🚀')
+    expect(router.state.location.pathname).toBe('/%F0%9F%9A%80')
   })
 
   it('state.location.pathname, should have the params._splat value of "100%25"', async () => {
@@ -637,7 +637,7 @@ describe('encoding: URL splat segment for /$', () => {
     await router.load()
 
     expect(router.state.location.pathname).toBe(
-      '/framework/react/guide/file-based-routing tanstack',
+      '/framework/react/guide/file-based-routing%20tanstack',
     )
   })
 
@@ -722,78 +722,64 @@ describe('encoding: URL path segment', () => {
   it.each([
     {
       input: '/path-segment/%C3%A9',
-      output: '/path-segment/é',
-      type: 'encoded',
+      output: '/path-segment/%C3%A9',
     },
     {
       input: '/path-segment/é',
-      output: '/path-segment/é',
-      type: 'not encoded',
+      output: '/path-segment/%C3%A9',
     },
     {
       input: '/path-segment/100%25', // `%25` = `%`
       output: '/path-segment/100%25',
-      type: 'not encoded',
     },
     {
       input: '/path-segment/100%25%25',
       output: '/path-segment/100%25%25',
-      type: 'not encoded',
     },
     {
       input: '/path-segment/100%26', // `%26` = `&`
       output: '/path-segment/100%26',
-      type: 'not encoded',
     },
     {
       input: '/path-segment/%F0%9F%9A%80',
-      output: '/path-segment/🚀',
-      type: 'encoded',
+      output: '/path-segment/%F0%9F%9A%80',
     },
     {
       input: '/path-segment/%F0%9F%9A%80to%2Fthe%2Fmoon',
-      output: '/path-segment/🚀to%2Fthe%2Fmoon',
-      type: 'encoded',
+      output: '/path-segment/%F0%9F%9A%80to%2Fthe%2Fmoon',
     },
     {
       input: '/path-segment/%25%F0%9F%9A%80to%2Fthe%2Fmoon',
-      output: '/path-segment/%25🚀to%2Fthe%2Fmoon',
-      type: 'encoded',
+      output: '/path-segment/%25%F0%9F%9A%80to%2Fthe%2Fmoon',
     },
     {
       input: '/path-segment/%F0%9F%9A%80to%2Fthe%2Fmoon%25',
-      output: '/path-segment/🚀to%2Fthe%2Fmoon%25',
-      type: 'encoded',
+      output: '/path-segment/%F0%9F%9A%80to%2Fthe%2Fmoon%25',
     },
     {
       input:
         '/path-segment/%F0%9F%9A%80to%2Fthe%2Fmoon%25%F0%9F%9A%80to%2Fthe%2Fmoon',
-      output: '/path-segment/🚀to%2Fthe%2Fmoon%25🚀to%2Fthe%2Fmoon',
-      type: 'encoded',
+      output:
+        '/path-segment/%F0%9F%9A%80to%2Fthe%2Fmoon%25%F0%9F%9A%80to%2Fthe%2Fmoon',
     },
     {
       input: '/path-segment/🚀',
-      output: '/path-segment/🚀',
-      type: 'not encoded',
+      output: '/path-segment/%F0%9F%9A%80',
     },
     {
       input: '/path-segment/🚀to%2Fthe%2Fmoon',
-      output: '/path-segment/🚀to%2Fthe%2Fmoon',
-      type: 'not encoded',
+      output: '/path-segment/%F0%9F%9A%80to%2Fthe%2Fmoon',
     },
-  ])(
-    'should resolve $input to $output when the path segment is $type',
-    async ({ input, output }) => {
-      const { router } = createTestRouter({
-        history: createMemoryHistory({ initialEntries: [input] }),
-      })
+  ])('should resolve $input to $output', async ({ input, output }) => {
+    const { router } = createTestRouter({
+      history: createMemoryHistory({ initialEntries: [input] }),
+    })
 
-      render(() => <RouterProvider router={router} />)
-      await router.load()
+    render(() => <RouterProvider router={router} />)
+    await router.load()
 
-      expect(router.state.location.pathname).toBe(output)
-    },
-  )
+    expect(router.state.location.pathname).toBe(output)
+  })
 })
 
 describe('router emits events during rendering', () => {

From 06ebf41e2911e46d0570c8807a0ceb1d659ab349 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Fri, 29 Aug 2025 09:56:53 -0600
Subject: [PATCH 32/34] fix: actually use fromURL

---
 packages/router-core/src/router.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/router-core/src/router.ts b/packages/router-core/src/router.ts
index 04e7ded4b96..62a38d0150e 100644
--- a/packages/router-core/src/router.ts
+++ b/packages/router-core/src/router.ts
@@ -1054,8 +1054,8 @@ export class RouterCore<
       state,
     }: HistoryLocation): ParsedLocation<FullSearchSchema<TRouteTree>> => {
       // Before we do any processing, we need to allow rewrites to modify the URL
-      if (this.options.rewrite?.toURL) {
-        url = new URL(this.options.rewrite.toURL({ url }) || url)
+      if (this.options.rewrite?.fromURL) {
+        url = new URL(this.options.rewrite.fromURL({ url }) || url)
       }
 
       // Make sure we derive all the properties we need from the URL object now

From 20373c927e0fb71f912e98aec28d86f3234803fe Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Sat, 30 Aug 2025 14:29:57 -0600
Subject: [PATCH 33/34] let's try this

---
 AGENTS.md                                     | 171 +++
 AI.md                                         | 348 -------
 packages/history/src/index.ts                 |  40 +-
 packages/react-router/src/Transitioner.tsx    |   4 +-
 packages/react-router/src/index.tsx           |   2 +-
 packages/react-router/src/link.tsx            |   4 +-
 packages/react-router/tests/router.test.tsx   | 982 ++++++++++++++++++
 packages/router-core/src/index.ts             |   3 +-
 packages/router-core/src/location.ts          |  15 +-
 packages/router-core/src/path.ts              |  72 +-
 packages/router-core/src/rewriteBasepath.ts   |  27 +
 packages/router-core/src/router.ts            | 162 +--
 packages/router-core/tests/path.test.ts       | 154 +--
 packages/solid-router/src/index.tsx           |   2 +-
 .../src/createStartHandler.ts                 |  11 +-
 15 files changed, 1350 insertions(+), 647 deletions(-)
 create mode 100644 AGENTS.md
 delete mode 100644 AI.md
 create mode 100644 packages/router-core/src/rewriteBasepath.ts

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000000..8f4e24c72a0
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,171 @@
+# AGENTS.md
+
+## Project overview
+
+TanStack Router is a type-safe router with built-in caching and URL state management for React and Solid applications. This monorepo contains two main products:
+
+- **TanStack Router** - Core routing library with type-safe navigation, search params, and path params
+- **TanStack Start** - Full-stack framework built on top of TanStack Router
+
+## Setup commands
+
+- Install deps: `pnpm install`
+- Setup e2e testing: `pnpm exec playwright install`
+- Build packages: `pnpm build` (affected) or `pnpm build:all` (force all)
+- Start dev server: `pnpm dev`
+- Run tests: `pnpm test`
+
+## Code style
+
+- TypeScript strict mode with extensive type safety
+- Framework-agnostic core logic separated from React/Solid bindings
+- Type-safe routing with search params and path params
+- Use workspace protocol for internal dependencies (`workspace:*`)
+
+## Dev environment tips
+
+- This is a pnpm workspace monorepo with packages organized by functionality
+- Nx provides caching, affected testing, targeting, and parallel execution for efficiency
+- Use `npx nx show projects` to list all available packages
+- Target specific packages: `npx nx run @tanstack/react-router:test:unit`
+- Target multiple packages: `npx nx run-many --target=test:eslint --projects=@tanstack/history,@tanstack/router-core`
+- Run affected tests only: `npx nx affected --target=test:unit`
+- Exclude patterns: `npx nx run-many --target=test:unit --exclude="examples/**,e2e/**"`
+- Navigate to examples and run `pnpm dev` to test changes: `cd examples/react/basic && pnpm dev`
+- **Granular Vitest testing within packages:**
+  - Navigate first: `cd packages/react-router`
+  - Specific files: `npx vitest run tests/link.test.tsx tests/Scripts.test.tsx`
+  - Test patterns: `npx vitest run tests/ClientOnly.test.tsx -t "should render fallback"`
+  - Name patterns: `npx vitest run -t "navigation"` (all tests with "navigation" in name)
+  - Exclude patterns: `npx vitest run --exclude="**/*link*" tests/`
+  - List tests: `npx vitest list tests/link.test.tsx` or `npx vitest list` (all)
+  - Through nx: `npx nx run @tanstack/react-router:test:unit -- tests/ClientOnly.test.tsx`
+- **Available test targets per package:** `test:unit`, `test:types`, `test:eslint`, `test:build`, `test:perf`, `build`
+- **Testing strategy:** Package level (nx) → File level (vitest) → Test level (-t flag) → Pattern level (exclude)
+
+## Testing instructions
+
+- **Critical**: Always run unit and type tests during development - do not proceed if they fail
+- **Test types:** `pnpm test:unit`, `pnpm test:types`, `pnpm test:eslint`, `pnpm test:e2e`, `pnpm test:build`
+- **Full CI suite:** `pnpm test:ci`
+- **Fix formatting:** `pnpm prettier:write`
+- **Efficient targeted testing workflow:**
+  1. **Affected only:** `npx nx affected --target=test:unit` (compares to main branch)
+  2. **Specific packages:** `npx nx run @tanstack/react-router:test:unit`
+  3. **Specific files:** `cd packages/react-router && npx vitest run tests/link.test.tsx`
+  4. **Specific patterns:** `npx vitest run tests/link.test.tsx -t "preloading"`
+- **Pro tips:**
+  - Use `npx vitest list` to explore available tests before running
+  - Use `-t "pattern"` to focus on specific functionality during development
+  - Use `--exclude` patterns to skip unrelated tests
+  - Combine nx package targeting with vitest file targeting for maximum precision
+- **Example workflow:** `npx nx run @tanstack/react-router:test:unit` → `cd packages/react-router && npx vitest run tests/link.test.tsx` → `npx vitest run tests/link.test.tsx -t "preloading"`
+
+## PR instructions
+
+- Always run `pnpm test:eslint`, `pnpm test:types`, and `pnpm test:unit` before committing
+- Test changes in relevant example apps: `cd examples/react/basic && pnpm dev`
+- Update corresponding documentation in `docs/` directory when adding features
+- Add or update tests for any code changes
+- Use internal docs links relative to `docs/` folder (e.g., `./guide/data-loading`)
+
+## Package structure
+
+**Core packages:**
+
+- `packages/router-core/` - Framework-agnostic core router logic
+- `packages/react-router/`, `packages/solid-router/` - React/Solid bindings and components
+- `packages/history/` - Browser history management
+
+**Tooling:**
+
+- `packages/router-cli/` - CLI tools for code generation
+- `packages/router-generator/` - Route generation utilities
+- `packages/router-plugin/` - Universal bundler plugins (Vite, Webpack, ESBuild, Rspack)
+- `packages/virtual-file-routes/` - Virtual file routing system
+
+**Developer experience:**
+
+- `packages/router-devtools/`, `packages/*-router-devtools/` - Development tools
+- `packages/eslint-plugin-router/` - ESLint rules for router
+
+**Validation adapters:**
+
+- `packages/zod-adapter/`, `packages/valibot-adapter/`, `packages/arktype-adapter/`
+
+**Start framework:**
+
+- `packages/*-start/`, `packages/start-*/` - Full-stack framework packages
+
+**Examples & testing:**
+
+- `examples/react/`, `examples/solid/` - Example applications (test changes here)
+- `e2e/` - End-to-end tests (requires Playwright)
+- `docs/router/`, `docs/start/` - Documentation with React/Solid subdirectories
+
+**Dependencies:** Uses workspace protocol (`workspace:*`) - core → framework → start packages
+
+## Common development tasks
+
+**Adding new routes:**
+
+- Use file-based routing in `src/routes/` directories
+- Or use code-based routing with route definitions
+- Run route generation with CLI tools
+
+**Testing changes:**
+
+- Build packages: `pnpm build` or `pnpm dev` (watch mode)
+- Run example apps to test functionality
+- Use devtools for debugging router state
+
+**Documentation updates:**
+
+- Update relevant docs in `docs/` directory
+- Ensure examples reflect documentation changes
+- Test documentation links and references
+- Use relative links to `docs/` folder format
+
+## Framework-specific notes
+
+**React:**
+
+- Uses React Router components and hooks
+- Supports React Server Components (RSC)
+- Examples include React Query integration
+- Package: `@tanstack/react-router`
+
+**Solid:**
+
+- Uses Solid Router components and primitives
+- Supports Solid Start for full-stack applications
+- Examples include Solid Query integration
+- Package: `@tanstack/solid-router`
+
+## Environment requirements
+
+- **Node.js** - Required for development
+- **pnpm** - Package manager (required for workspace features)
+- **Playwright** - Required for e2e tests (`pnpm exec playwright install`)
+
+## Key architecture patterns
+
+- **Type Safety**: Extensive TypeScript for type-safe routing
+- **Framework Agnostic**: Core logic separated from framework bindings
+- **Plugin Architecture**: Universal bundler plugins using unplugin
+- **File-based Routing**: Support for both code-based and file-based routing
+- **Search Params**: First-class support for type-safe search parameters
+
+## Development workflow
+
+1. **Setup**: `pnpm install` and `pnpm exec playwright install`
+2. **Build**: `pnpm build:all` or `pnpm dev` for watch mode
+3. **Test**: Make changes and run relevant tests (use nx for targeted testing)
+4. **Examples**: Navigate to examples and run `pnpm dev` to test changes
+5. **Quality**: Run `pnpm test:eslint`, `pnpm test:types`, `pnpm test:unit` before committing
+
+## References
+
+- **Documentation**: https://tanstack.com/router
+- **GitHub**: https://github.com/TanStack/router
+- **Discord Community**: https://discord.com/invite/WrRKjPJ
diff --git a/AI.md b/AI.md
deleted file mode 100644
index 5860ac0188b..00000000000
--- a/AI.md
+++ /dev/null
@@ -1,348 +0,0 @@
-# AI.md
-
-This file provides guidance to AI assistants when working with the TanStack Router codebase.
-
-## Project Overview
-
-TanStack Router is a type-safe router with built-in caching and URL state management for React and Solid applications. This monorepo contains two main products:
-
-- **TanStack Router** - Core routing library with type-safe navigation, search params, and path params
-- **TanStack Start** - Full-stack framework built on top of TanStack Router
-
-## Repository Structure
-
-### Core Packages
-
-**Router Core:**
-
-- `router-core/` - Framework-agnostic core router logic
-- `react-router/` - React bindings and components
-- `solid-router/` - Solid bindings and components
-- `history/` - Browser history management
-
-**Tooling:**
-
-- `router-cli/` - CLI tools for code generation
-- `router-generator/` - Route generation utilities
-- `router-plugin/` - Universal bundler plugins (Vite, Webpack, ESBuild, Rspack)
-- `router-vite-plugin/` - Vite-specific plugin wrapper
-- `virtual-file-routes/` - Virtual file routing system
-
-**Developer Experience:**
-
-- `router-devtools/` - Router development tools
-- `router-devtools-core/` - Core devtools functionality
-- `react-router-devtools/` - React-specific devtools
-- `solid-router-devtools/` - Solid-specific devtools
-- `eslint-plugin-router/` - ESLint rules for router
-
-**Adapters:**
-
-- `zod-adapter/` - Zod validation adapter
-- `valibot-adapter/` - Valibot validation adapter
-- `arktype-adapter/` - ArkType validation adapter
-
-**Start Framework:**
-
-- `start/` - Core start framework
-- `react-start/` - React Start framework
-- `solid-start/` - Solid Start framework
-- `start-*` packages - Various start framework utilities
-
-### Documentation
-
-Documentation is organized in `docs/`:
-
-- `docs/router/` - Router-specific documentation
-- `docs/start/` - Start framework documentation
-- Each has `framework/react/` and `framework/solid/` subdirectories
-
-### Examples
-
-Extensive examples in `examples/`:
-
-- `examples/react/` - React router examples
-- `examples/solid/` - Solid router examples
-- Examples range from basic usage to complex applications
-
-### Testing
-
-- `e2e/` - End-to-end tests organized by framework
-- Individual packages have `tests/` directories
-- Uses Playwright for e2e testing
-
-## Essential Commands
-
-### Development
-
-```bash
-# Install dependencies
-pnpm install
-
-# Build all packages (affected only)
-pnpm build
-
-# Build all packages (force all)
-pnpm build:all
-
-# Development mode with watch
-pnpm dev
-
-# Run all tests
-pnpm test
-
-# Run tests in CI mode
-pnpm test:ci
-```
-
-### Testing
-
-```bash
-# Run unit tests
-pnpm test:unit
-
-# Run e2e tests
-pnpm test:e2e
-
-# Run type checking
-pnpm test:types
-
-# Run linting
-pnpm test:eslint
-
-# Run formatting check
-pnpm test:format
-
-# Fix formatting
-pnpm prettier:write
-```
-
-### Targeted Testing with Nx
-
-```bash
-# Target specific package
-npx nx run @tanstack/react-router:test:unit
-npx nx run @tanstack/router-core:test:types
-npx nx run @tanstack/history:test:eslint
-
-# Target multiple packages
-npx nx run-many --target=test:eslint --projects=@tanstack/history,@tanstack/router-core
-
-# Run affected tests only (compares to main branch)
-npx nx affected --target=test:unit
-
-# Exclude certain patterns
-npx nx run-many --target=test:unit --exclude="examples/**,e2e/**"
-
-# List all available projects
-npx nx show projects
-```
-
-### Granular Vitest Testing
-
-For even more precise test targeting within packages:
-
-```bash
-# Navigate to package directory first
-cd packages/react-router
-
-# Run specific test files
-npx vitest run tests/link.test.tsx
-npx vitest run tests/ClientOnly.test.tsx tests/Scripts.test.tsx
-
-# Run tests by name pattern
-npx vitest run tests/ClientOnly.test.tsx -t "should render fallback"
-npx vitest run -t "navigation"  # Run all tests with "navigation" in name
-
-# Exclude test patterns
-npx vitest run --exclude="**/*link*" tests/
-
-# List available tests
-npx vitest list tests/link.test.tsx
-npx vitest list  # List all tests in package
-
-# Through nx (passes args to vitest)
-npx nx run @tanstack/react-router:test:unit -- tests/ClientOnly.test.tsx
-npx nx run @tanstack/react-router:test:unit -- tests/link.test.tsx tests/Scripts.test.tsx
-```
-
-### Example Development
-
-```bash
-# Navigate to an example
-cd examples/react/basic
-
-# Run the example
-pnpm dev
-```
-
-## Development Workflow
-
-1. **Setup**: `pnpm install` and `pnpm exec playwright install`
-2. **Build**: `pnpm build:all` or `pnpm dev` for watch mode
-3. **Test**: Make changes and run relevant tests (use nx for targeted testing)
-4. **Examples**: Navigate to examples and run `pnpm dev` to test changes
-
-### Nx-Powered Development
-
-This repository uses Nx for efficient task execution:
-
-- **Caching**: Nx caches task results - repeated commands are faster
-- **Affected**: Only runs tasks for changed code (`nx affected`)
-- **Targeting**: Run tasks for specific packages or combinations
-- **Parallel Execution**: Multiple tasks run in parallel automatically
-- **Dependency Management**: Nx handles build order and dependencies
-
-## Code Organization
-
-### Monorepo Structure
-
-This is a pnpm workspace with packages organized by functionality:
-
-- Core packages provide the fundamental router logic
-- Framework packages provide React/Solid bindings
-- Tool packages provide development utilities
-- Start packages provide full-stack framework capabilities
-
-### Key Patterns
-
-- **Type Safety**: Extensive use of TypeScript for type-safe routing
-- **Framework Agnostic**: Core logic separated from framework bindings
-- **Plugin Architecture**: Universal bundler plugins using unplugin
-- **File-based Routing**: Support for both code-based and file-based routing
-- **Search Params**: First-class support for type-safe search parameters
-
-## Documentation Guidelines
-
-- **Internal Links**: Always write relative to `docs/` folder (e.g., `./guide/data-loading`)
-- **Examples**: Each major feature should have corresponding examples
-- **Type Safety**: Document TypeScript patterns and type inference
-- **Framework Specific**: Separate docs for React and Solid when needed
-
-## Critical Quality Checks
-
-**During prompt-driven development, always run unit and type tests to ensure validity. If either of these fail, do not stop or proceed (unless you have repeatedly failed and need human intervention).**
-
-**You can run these (or the ones you are working on) after each big change:**
-
-```bash
-pnpm test:eslint    # Linting
-pnpm test:types     # TypeScript compilation
-pnpm test:unit      # Unit tests
-pnpm test:build     # Build verification
-```
-
-**For comprehensive testing:**
-
-```bash
-pnpm test:ci        # Full CI test suite
-pnpm test:e2e       # End-to-end tests
-```
-
-**For targeted testing (recommended for efficiency):**
-
-```bash
-# Test only affected packages
-npx nx affected --target=test:unit
-npx nx affected --target=test:types
-npx nx affected --target=test:eslint
-
-# Test specific packages you're working on
-npx nx run @tanstack/react-router:test:unit
-npx nx run @tanstack/router-core:test:types
-
-# Test specific files/functionality you're working on
-cd packages/react-router
-npx vitest run tests/link.test.tsx -t "preloading"
-npx vitest run tests/useNavigate.test.tsx tests/useParams.test.tsx
-```
-
-**Pro Tips:**
-
-- Use `npx vitest list` to explore available tests before running
-- Use `-t "pattern"` to focus on specific functionality during development
-- Use `--exclude` patterns to skip unrelated tests
-- Combine nx package targeting with vitest file targeting for maximum precision
-
-## Package Dependencies
-
-The monorepo uses workspace dependencies extensively:
-
-- Core packages are dependencies of framework packages
-- Framework packages are dependencies of start packages
-- All packages use workspace protocol (`workspace:*`)
-
-## Environment Setup
-
-- **Node.js**: Required for development
-- **pnpm**: Package manager (required for workspace features)
-- **Playwright**: Required for e2e tests (`pnpm exec playwright install`)
-
-## Common Tasks
-
-### Adding New Routes
-
-- Use file-based routing in `src/routes/` directories
-- Or use code-based routing with route definitions
-- Run route generation with CLI tools
-
-### Testing Changes
-
-- Build packages: `pnpm build` or `pnpm dev`
-- Run example apps to test functionality
-- Use devtools for debugging router state
-
-**Available Test Targets per Package:**
-
-- `test:unit` - Unit tests with Vitest
-- `test:types` - TypeScript compilation across multiple TS versions
-- `test:eslint` - Linting with ESLint
-- `test:build` - Build verification (publint + attw)
-- `test:perf` - Performance benchmarks
-- `build` - Package building
-
-**Granular Test Targeting Strategies:**
-
-1. **Package Level**: Use nx to target specific packages
-2. **File Level**: Use vitest directly to target specific test files
-3. **Test Level**: Use vitest `-t` flag to target specific test names
-4. **Pattern Level**: Use vitest exclude patterns to skip certain tests
-
-Example workflow:
-
-```bash
-# 1. Test specific package
-npx nx run @tanstack/react-router:test:unit
-
-# 2. Test specific files within package
-cd packages/react-router && npx vitest run tests/link.test.tsx
-
-# 3. Test specific functionality
-npx vitest run tests/link.test.tsx -t "preloading"
-```
-
-### Documentation Updates
-
-- Update relevant docs in `docs/` directory
-- Ensure examples reflect documentation
-- Test documentation links and references
-
-## Framework-Specific Notes
-
-### React
-
-- Uses React Router components and hooks
-- Supports React Server Components (RSC)
-- Examples include React Query integration
-
-### Solid
-
-- Uses Solid Router components and primitives
-- Supports Solid Start for full-stack applications
-- Examples include Solid Query integration
-
-## References
-
-- Main Documentation: https://tanstack.com/router
-- GitHub Repository: https://github.com/TanStack/router
-- Discord Community: https://discord.com/invite/WrRKjPJ
diff --git a/packages/history/src/index.ts b/packages/history/src/index.ts
index 01fa5013113..1005bff5a56 100644
--- a/packages/history/src/index.ts
+++ b/packages/history/src/index.ts
@@ -44,8 +44,8 @@ export interface HistoryLocation extends ParsedPath {
 }
 
 export interface ParsedPath {
-  url: URL
   href: string
+  fullPath: string
   pathname: string
   search: string
   hash: string
@@ -85,7 +85,7 @@ type TryNavigateArgs = {
 } & (
   | {
       type: 'PUSH' | 'REPLACE'
-      path: string
+      href: string
       state: any
     }
   | {
@@ -143,7 +143,7 @@ export function createHistory(opts: {
       actionInfo.type === 'PUSH' || actionInfo.type === 'REPLACE'
     if (typeof document !== 'undefined' && blockers.length && isPushOrReplace) {
       for (const blocker of blockers) {
-        const nextLocation = parseHref(actionInfo.path, actionInfo.state)
+        const nextLocation = parseHref(actionInfo.href, actionInfo.state)
         const isBlocked = await blocker.blockerFn({
           currentLocation: location,
           nextLocation,
@@ -174,31 +174,31 @@ export function createHistory(opts: {
         subscribers.delete(cb)
       }
     },
-    push: (path, state, navigateOpts) => {
+    push: (href, state, navigateOpts) => {
       const currentIndex = location.state[stateIndexKey]
       state = assignKeyAndIndex(currentIndex + 1, state)
       tryNavigation({
         task: () => {
-          opts.pushState(path, state)
+          opts.pushState(href, state)
           notify({ type: 'PUSH' })
         },
         navigateOpts,
         type: 'PUSH',
-        path,
+        href,
         state,
       })
     },
-    replace: (path, state, navigateOpts) => {
+    replace: (href, state, navigateOpts) => {
       const currentIndex = location.state[stateIndexKey]
       state = assignKeyAndIndex(currentIndex, state)
       tryNavigation({
         task: () => {
-          opts.replaceState(path, state)
+          opts.replaceState(href, state)
           notify({ type: 'REPLACE' })
         },
         navigateOpts,
         type: 'REPLACE',
-        path,
+        href,
         state,
       })
     },
@@ -352,7 +352,7 @@ export function createBrowserHistory(opts?: {
     ;(next.isPush ? win.history.pushState : win.history.replaceState)(
       next.state,
       '',
-      next.href,
+      next.href.replace(new URL(next.href).origin, ''),
     )
 
     // Stop ignoring subscriber updates
@@ -617,22 +617,14 @@ export function parseHref(
   href: string,
   state: ParsedHistoryState | undefined,
 ): HistoryLocation {
-  let url!: URL
-
-  try {
-    url = new URL(href)
-  } catch {
-    url = new URL(href, 'http://localhost')
-  }
-
+  href = withOrigin(href, 'http://localhost')
   const hashIndex = href.indexOf('#')
   const searchIndex = href.indexOf('?')
-
   const addedKey = createRandomKey()
 
   return {
-    url,
     href,
+    fullPath: href.replace(new URL(href).origin, ''),
     pathname: href.substring(
       0,
       hashIndex > 0
@@ -652,6 +644,14 @@ export function parseHref(
   }
 }
 
+export function withOrigin(href: string, fallbackOrigin: string) {
+  try {
+    return new URL(href).href
+  } catch {
+    return new URL(href, fallbackOrigin).href
+  }
+}
+
 // Thanks co-pilot!
 function createRandomKey() {
   return (Math.random() + 1).toString(36).substring(7)
diff --git a/packages/react-router/src/Transitioner.tsx b/packages/react-router/src/Transitioner.tsx
index 04e140acfcd..4c00521a2d7 100644
--- a/packages/react-router/src/Transitioner.tsx
+++ b/packages/react-router/src/Transitioner.tsx
@@ -53,8 +53,8 @@ export function Transitioner() {
     })
 
     if (
-      trimPathRight(router.latestLocation.href) !==
-      trimPathRight(nextLocation.href)
+      trimPathRight(router.latestLocation.fullPath) !==
+      trimPathRight(nextLocation.fullPath)
     ) {
       router.commitLocation({ ...nextLocation, replace: true })
     }
diff --git a/packages/react-router/src/index.tsx b/packages/react-router/src/index.tsx
index d7b1c996db2..ce814972c35 100644
--- a/packages/react-router/src/index.tsx
+++ b/packages/react-router/src/index.tsx
@@ -11,7 +11,6 @@ export {
   parsePathname,
   interpolatePath,
   matchPathname,
-  removeBasepath,
   matchByPath,
   rootRouteId,
   defaultSerializeError,
@@ -351,3 +350,4 @@ export { Asset } from './Asset'
 export { HeadContent } from './HeadContent'
 export { Scripts } from './Scripts'
 export type * from './ssr/serializer'
+export { rewriteBasepath } from '@tanstack/router-core'
diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index 615dcf4fccf..e9025a35fda 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -351,8 +351,8 @@ export function useLinkProps<
     href: disabled
       ? undefined
       : next.maskedLocation
-        ? next.maskedLocation.fullPath
-        : next.fullPath,
+        ? next.maskedLocation.publicHref
+        : next.publicHref,
     ref: innerRef as React.ComponentPropsWithRef<'a'>['ref'],
     onClick: composeHandlers([onClick, handleClick]),
     onFocus: composeHandlers([onFocus, handleFocus]),
diff --git a/packages/react-router/tests/router.test.tsx b/packages/react-router/tests/router.test.tsx
index 725db69cbbc..378c0d61a57 100644
--- a/packages/react-router/tests/router.test.tsx
+++ b/packages/react-router/tests/router.test.tsx
@@ -1849,3 +1849,985 @@ describe('statusCode reset on navigation', () => {
     expect(router.state.statusCode).toBe(404)
   })
 })
+
+describe('Router rewrite functionality', () => {
+  it('should rewrite URLs using fromURL before router interprets them', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const newPathRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/new-path',
+      component: () => <div data-testid="new-path">New Path Content</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([newPathRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({ initialEntries: ['/old-path'] }),
+      rewrite: {
+        fromURL: ({ url }) => {
+          // Rewrite /old-path to /new-path
+          if (url.pathname === '/old-path') {
+            return `/new-path${url.search}${url.hash}`
+          }
+          return undefined
+        },
+      },
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('new-path')).toBeInTheDocument()
+    })
+
+    // Router should have interpreted the rewritten URL
+    expect(router.state.location.pathname).toBe('/new-path')
+  })
+
+  it('should handle fromURL rewrite with complex URL transformations', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const usersRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/users',
+      component: () => <div data-testid="users">Users Content</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([usersRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/legacy/users?page=1#top'],
+      }),
+      rewrite: {
+        fromURL: ({ url }) => {
+          // Rewrite legacy URLs to new format
+          if (url.pathname === '/legacy/users') {
+            return `/users${url.search}${url.hash}`
+          }
+          return undefined
+        },
+      },
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('users')).toBeInTheDocument()
+    })
+
+    // Router should have interpreted the rewritten URL
+    expect(router.state.location.pathname).toBe('/users')
+    expect(router.state.location.search).toEqual({ page: 1 })
+    expect(router.state.location.hash).toBe('top')
+  })
+
+  it('should handle multiple fromURL rewrite conditions', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const homeRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => <div data-testid="home">Home Content</div>,
+    })
+
+    const aboutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/about',
+      component: () => <div data-testid="about">About Content</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([homeRoute, aboutRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({ initialEntries: ['/old-about'] }),
+      rewrite: {
+        fromURL: ({ url }) => {
+          // Multiple rewrite rules
+          if (url.pathname === '/old-home' || url.pathname === '/home') {
+            return '/'
+          }
+          if (url.pathname === '/old-about' || url.pathname === '/info') {
+            return '/about'
+          }
+          return undefined
+        },
+      },
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('about')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/about')
+  })
+
+  it('should handle fromURL rewrite with search params and hash preservation', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const docsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/docs',
+      component: () => <div data-testid="docs">Documentation</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([docsRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/old/documentation?version=v2&lang=en#installation'],
+      }),
+      rewrite: {
+        fromURL: ({ url }) => {
+          // Rewrite old docs URL structure
+          if (url.pathname === '/old/documentation') {
+            return `/docs${url.search}${url.hash}`
+          }
+          return undefined
+        },
+      },
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('docs')).toBeInTheDocument()
+    })
+
+    // Verify the URL was rewritten correctly with search params and hash preserved
+    expect(router.state.location.pathname).toBe('/docs')
+    expect(router.state.location.search).toEqual({
+      version: 'v2',
+      lang: 'en',
+    })
+    expect(router.state.location.hash).toBe('installation')
+  })
+
+  it('should handle subdomain to path rewriting with fromURL', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const apiRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/api/users',
+      component: () => <div data-testid="api">API Users</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([apiRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['https://test.domain.com/users'],
+      }),
+      rewrite: {
+        fromURL: ({ url }) => {
+          // Rewrite test.domain.com/path to /api/path (subdomain becomes path segment)
+          if (url.pathname.startsWith('/test.domain.com/')) {
+            return url.pathname.replace('/test.domain.com/', '/api/')
+          }
+          return undefined
+        },
+      },
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('api')).toBeInTheDocument()
+    })
+
+    // Router should have interpreted the rewritten URL
+    expect(router.state.location.pathname).toBe('/api/users')
+  })
+
+  it('should handle hostname-based routing with fromURL rewrite', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const appRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/app',
+      component: () => <div data-testid="app">App Content</div>,
+    })
+
+    const adminRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/admin',
+      component: () => <div data-testid="admin">Admin Content</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([appRoute, adminRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['https://admin.example.com/dashboard'],
+      }),
+      rewrite: {
+        fromURL: ({ url }) => {
+          // Route based on subdomain
+          if (url.hostname === 'admin.example.com') {
+            return '/admin'
+          }
+          if (url.hostname === 'app.example.com') {
+            return '/app'
+          }
+          return undefined
+        },
+      },
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('admin')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/admin')
+  })
+
+  it('should handle multiple URL transformation patterns', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const productsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/products',
+      component: () => <div data-testid="products">Products</div>,
+    })
+
+    const blogRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/blog',
+      component: () => <div data-testid="blog">Blog</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([productsRoute, blogRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/old/shop/items?category=electronics'],
+      }),
+      rewrite: {
+        fromURL: ({ url }) => {
+          // Multiple transformation patterns
+          if (url.pathname === '/old/shop/items') {
+            return `/products${url.search}${url.hash}`
+          }
+          if (url.pathname.startsWith('/legacy/')) {
+            return url.pathname.replace('/legacy/', '/blog/')
+          }
+          if (url.pathname.startsWith('/v1/')) {
+            return url.pathname.replace('/v1/', '/')
+          }
+          return undefined
+        },
+      },
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('products')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/products')
+    expect(router.state.location.search).toEqual({ category: 'electronics' })
+  })
+
+  it('should handle returning a fully formed href string with origin (edge case)', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const apiRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/api/v2',
+      component: () => <div data-testid="api-v2">API v2</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([apiRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['https://legacy.example.com/api/v1'],
+      }),
+      rewrite: {
+        fromURL: ({ url }) => {
+          // Edge case: return fully formed href string with origin
+          if (
+            url.hostname === 'legacy.example.com' &&
+            url.pathname === '/api/v1'
+          ) {
+            return 'https://api.example.com/api/v2'
+          }
+          return undefined
+        },
+      },
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('api-v2')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/api/v2')
+  })
+
+  it('should handle mutating the url parameter and returning it (recommended pattern)', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const newApiRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/api/v3/users',
+      component: () => <div data-testid="api-v3">API v3 Users</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([newApiRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: [
+          'https://old-api.company.com/users?limit=10&offset=20',
+        ],
+      }),
+      rewrite: {
+        fromURL: ({ url }) => {
+          // Recommended pattern: mutate the url parameter and return it
+          if (
+            url.hostname === 'old-api.company.com' &&
+            url.pathname === '/users'
+          ) {
+            url.hostname = 'api.company.com'
+            url.pathname = '/api/v3/users'
+            url.searchParams.set('version', '3')
+            return url // Return the mutated URL instance
+          }
+          return undefined
+        },
+      },
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('api-v3')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/api/v3/users')
+    expect(router.state.location.search).toEqual({
+      limit: 10,
+      offset: 20,
+      version: 3,
+    })
+  })
+
+  it('should handle complex URL mutations with hostname and search params', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const blogRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/content/blog',
+      component: () => <div data-testid="blog">Blog Content</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([blogRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: [
+          'https://blog.oldsite.com/posts?category=tech&year=2024#top',
+        ],
+      }),
+      rewrite: {
+        fromURL: ({ url }) => {
+          // Mutate URL: change subdomain to path, preserve params and hash
+          if (url.hostname === 'blog.oldsite.com') {
+            url.hostname = 'newsite.com'
+            url.pathname = '/content/blog'
+            url.searchParams.set('source', 'migration')
+            // Keep existing search params and hash
+            return url
+          }
+          return undefined
+        },
+      },
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('blog')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/content/blog')
+    expect(router.state.location.search).toEqual({
+      category: 'tech',
+      year: 2024,
+      source: 'migration',
+    })
+    expect(router.state.location.hash).toBe('top')
+  })
+
+  it('should handle returning new URL instance vs mutating existing one', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const shopRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/shop/products',
+      component: () => <div data-testid="shop">Shop Products</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([shopRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['https://store.example.com/items?id=123'],
+      }),
+      rewrite: {
+        fromURL: ({ url }) => {
+          // Alternative pattern: create new URL instance and return it
+          if (
+            url.hostname === 'store.example.com' &&
+            url.pathname === '/items'
+          ) {
+            const newUrl = new URL('https://example.com/shop/products')
+            newUrl.searchParams.set(
+              'productId',
+              url.searchParams.get('id') || '',
+            )
+            newUrl.searchParams.set('migrated', 'true')
+            return newUrl
+          }
+          return undefined
+        },
+      },
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('shop')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/shop/products')
+    expect(router.state.location.search).toEqual({
+      productId: 123,
+      migrated: true,
+    })
+  })
+
+  // NOTE: toURL functionality tests - Currently failing as toURL may not be fully implemented
+  // These tests are preserved for when toURL functionality becomes available
+
+  it.skip('should handle toURL rewrite when navigating (PENDING: toURL not implemented)', async () => {
+    // This test demonstrates expected toURL behavior for programmatic navigation
+    // Currently fails because toURL doesn't affect history.location.pathname
+    const Navigate = () => {
+      const navigate = useNavigate()
+      return (
+        <button
+          data-testid="navigate-btn"
+          onClick={() => navigate({ to: '/dashboard' })}
+        >
+          Navigate to Dashboard
+        </button>
+      )
+    }
+
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: Navigate,
+    })
+
+    const dashboardRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/dashboard',
+      component: () => <div data-testid="dashboard">Dashboard</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([indexRoute, dashboardRoute])
+
+    const history = createMemoryHistory({ initialEntries: ['/'] })
+    const router = createRouter({
+      routeTree,
+      history,
+      rewrite: {
+        toURL: ({ url }) => {
+          // Should rewrite dashboard URLs to admin URLs in the history
+          if (url.pathname === '/dashboard') {
+            return '/admin/panel'
+          }
+          return undefined
+        },
+      },
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const navigateBtn = await screen.findByTestId('navigate-btn')
+
+    await act(() => {
+      fireEvent.click(navigateBtn)
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('dashboard')).toBeInTheDocument()
+    })
+
+    // Router internal state should show the internal path
+    expect(router.state.location.pathname).toBe('/dashboard')
+
+    // EXPECTED: History should be updated with the rewritten path due to toURL
+    // ACTUAL: Currently fails - history.location.pathname remains '/dashboard'
+    expect(history.location.pathname).toBe('/admin/panel')
+  })
+
+  it.skip('should handle toURL rewrite with Link navigation (PENDING: toURL not implemented)', async () => {
+    // This test demonstrates expected toURL behavior for Link-based navigation
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => (
+        <div>
+          <Link to="/profile" data-testid="profile-link">
+            Go to Profile
+          </Link>
+        </div>
+      ),
+    })
+
+    const profileRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/profile',
+      component: () => <div data-testid="profile">User Profile</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([indexRoute, profileRoute])
+
+    const history = createMemoryHistory({ initialEntries: ['/'] })
+    const router = createRouter({
+      routeTree,
+      history,
+      rewrite: {
+        toURL: ({ url }) => {
+          // Should rewrite profile URLs to user URLs in history
+          if (url.pathname === '/profile') {
+            url.pathname = '/user'
+            return url
+          }
+          return undefined
+        },
+      },
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const profileLink = await screen.findByTestId('profile-link')
+
+    await act(() => {
+      fireEvent.click(profileLink)
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('profile')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/profile')
+
+    // EXPECTED: History should show rewritten path
+    // ACTUAL: Currently fails - history shows original path
+    expect(history.location.pathname).toBe('/user')
+  })
+
+  it.skip('should handle toURL with search params and hash (PENDING: toURL not implemented)', async () => {
+    // This test would verify toURL rewriting with complex URL components
+    // Currently skipped as toURL functionality is not working as expected
+  })
+
+  it.skip('should handle toURL returning fully formed href string (PENDING: toURL not implemented)', async () => {
+    // This test would verify toURL returning complete URLs with origins
+    // Currently skipped as toURL functionality is not working as expected
+  })
+})
+
+describe('rewriteBasepath utility', () => {
+  // Helper function to create basepath rewrite logic (mimicking the utility)
+  const createBasepathRewrite = (
+    basepath: string,
+    additionalRewrite?: {
+      fromURL: (opts: { url: URL }) => URL | undefined
+    },
+  ) => {
+    const trimmedBasepath = basepath.replace(/^\/+|\/+$/g, '') // trim slashes
+    return {
+      fromURL: ({ url }: { url: URL }) => {
+        if (trimmedBasepath) {
+          url.pathname = url.pathname.replace(
+            new RegExp(`^/${trimmedBasepath}`),
+            '',
+          )
+        }
+        return additionalRewrite?.fromURL
+          ? additionalRewrite.fromURL({ url })
+          : url
+      },
+    } as const
+  }
+
+  it('should handle basic basepath rewriting with fromURL', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const homeRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => <div data-testid="home">Home</div>,
+    })
+
+    const aboutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/about',
+      component: () => <div data-testid="about">About</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([homeRoute, aboutRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/my-app/about'],
+      }),
+      rewrite: createBasepathRewrite('my-app'),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('about')).toBeInTheDocument()
+    })
+
+    // Router should interpret the URL without the basepath
+    expect(router.state.location.pathname).toBe('/about')
+  })
+
+  it('should handle basepath with leading and trailing slashes', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const usersRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/users',
+      component: () => <div data-testid="users">Users</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([usersRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/api/v1/users'],
+      }),
+      rewrite: createBasepathRewrite('/api/v1/'), // With leading and trailing slashes
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('users')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/users')
+  })
+
+  it('should handle empty basepath gracefully', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const testRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/test',
+      component: () => <div data-testid="test">Test</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([testRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/test'],
+      }),
+      rewrite: createBasepathRewrite(''), // Empty basepath
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('test')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/test')
+  })
+
+  it('should combine basepath with additional fromURL rewrite logic', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const newApiRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/api/v2',
+      component: () => <div data-testid="api-v2">API v2</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([newApiRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/my-app/legacy/api/v1'],
+      }),
+      rewrite: createBasepathRewrite('my-app', {
+        // Additional rewrite logic after basepath removal
+        fromURL: ({ url }) => {
+          if (url.pathname === '/legacy/api/v1') {
+            url.pathname = '/api/v2'
+            return url
+          }
+          return undefined
+        },
+      }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('api-v2')).toBeInTheDocument()
+    })
+
+    // Should first remove basepath (/my-app/legacy/api/v1 -> /legacy/api/v1)
+    // Then apply additional rewrite (/legacy/api/v1 -> /api/v2)
+    expect(router.state.location.pathname).toBe('/api/v2')
+  })
+
+  it('should handle complex basepath with subdomain-style paths', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const dashboardRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/dashboard',
+      component: () => <div data-testid="dashboard">Dashboard</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([dashboardRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/tenant-123/dashboard'],
+      }),
+      rewrite: createBasepathRewrite('tenant-123'),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('dashboard')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/dashboard')
+  })
+
+  it('should preserve search params and hash when rewriting basepath', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const searchRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/search',
+      component: () => <div data-testid="search">Search</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([searchRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/app/search?q=test&filter=all#results'],
+      }),
+      rewrite: createBasepathRewrite('app'),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('search')).toBeInTheDocument()
+    })
+
+    expect(router.state.location.pathname).toBe('/search')
+    expect(router.state.location.search).toEqual({
+      q: 'test',
+      filter: 'all',
+    })
+    expect(router.state.location.hash).toBe('results')
+  })
+
+  it.skip('should handle nested basepath with multiple rewrite layers (complex case)', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const finalRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/final',
+      component: () => <div data-testid="final">Final</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([finalRoute])
+
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({
+        initialEntries: ['/base/legacy/old/path'],
+      }),
+      rewrite: createBasepathRewrite('base', {
+        fromURL: ({ url }) => {
+          // First layer: convert legacy paths
+          if (url.pathname === '/legacy/old/path') {
+            url.pathname = '/new/path'
+            return url
+          }
+          return undefined
+        },
+      }),
+    })
+
+    // Add a second rewrite layer
+    const originalRewrite = router.options.rewrite
+    router.options.rewrite = {
+      fromURL: ({ url }) => {
+        // Apply basepath rewrite first
+        const result = originalRewrite?.fromURL?.({ url })
+        if (result && typeof result !== 'string') {
+          // Second layer: convert new paths to final
+          if (result.pathname === '/new/path') {
+            result.pathname = '/final'
+            return result
+          }
+        }
+        return result
+      },
+    }
+
+    render(<RouterProvider router={router} />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('final')).toBeInTheDocument()
+    })
+
+    // Should apply: /base/legacy/old/path -> /legacy/old/path -> /new/path -> /final
+    expect(router.state.location.pathname).toBe('/final')
+  })
+
+  it.skip('should handle basepath with toURL rewriting (PENDING: toURL not implemented)', async () => {
+    // This test would verify that basepath is added back when navigating
+    // Currently skipped as toURL functionality is not working as expected
+
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => (
+        <div>
+          <Link to="/about" data-testid="about-link">
+            About
+          </Link>
+        </div>
+      ),
+    })
+
+    const aboutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/about',
+      component: () => <div data-testid="about">About</div>,
+    })
+
+    const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+
+    const history = createMemoryHistory({ initialEntries: ['/my-app/'] })
+
+    const router = createRouter({
+      routeTree,
+      history,
+      rewrite: createBasepathRewrite('my-app'),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const aboutLink = await screen.findByTestId('about-link')
+
+    await act(() => {
+      fireEvent.click(aboutLink)
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('about')).toBeInTheDocument()
+    })
+
+    // Router internal state should show clean path
+    expect(router.state.location.pathname).toBe('/about')
+
+    // EXPECTED: History should show path with basepath added back
+    // ACTUAL: Currently fails due to toURL not being implemented
+    expect(history.location.pathname).toBe('/my-app/about')
+  })
+})
diff --git a/packages/router-core/src/index.ts b/packages/router-core/src/index.ts
index 69ec837b7e1..d808d753c1a 100644
--- a/packages/router-core/src/index.ts
+++ b/packages/router-core/src/index.ts
@@ -103,7 +103,6 @@ export {
   parsePathname,
   interpolatePath,
   matchPathname,
-  removeBasepath,
   matchByPath,
 } from './path'
 export type { Segment } from './path'
@@ -430,3 +429,5 @@ export {
 } from './ssr/serializer/transformer'
 
 export { defaultSerovalPlugins } from './ssr/serializer/seroval-plugins'
+
+export { rewriteBasepath } from './rewriteBasepath'
diff --git a/packages/router-core/src/location.ts b/packages/router-core/src/location.ts
index 9fe4e6f17d4..0f0861a2272 100644
--- a/packages/router-core/src/location.ts
+++ b/packages/router-core/src/location.ts
@@ -3,15 +3,12 @@ import type { AnySchema } from './validators'
 
 export interface ParsedLocation<TSearchObj extends AnySchema = {}> {
   /**
-   * The URL instance representing the location. In future versions of TanStack Router,
-   * this will be the preferred way to access basic url information. This will
-   * not include derived properties like `fullPath`, the `search` object,
-   * `maskedLocation`, or anything else that can already be found on the `URL` class.
+   * @description The public href of the location, including the origin before any rewrites.
+   * If a rewrite is applied, the `href` property will be the rewritten URL.
    */
-  url: URL
+  publicHref: string
   /**
-   * @deprecated In future versions of TanStack Router, `href` will
-   * represent the full URL, including the origin. As a replacement,
+   * @description The full URL of the location, including the origin. As a replacement,
    * please upgrade to the new `fullPath` property, which is derived by
    * combining `pathname`, `search`, and `hash`. like so:
    * `${pathname}${searchStr}${hash}`. If you're looking for the actual
@@ -25,9 +22,7 @@ export interface ParsedLocation<TSearchObj extends AnySchema = {}> {
    */
   fullPath: string
   /**
-   * @deprecated In future versions of TanStack Router, this property will be removed.
-   * Please use the `location.url.pathname` property instead.
-   * The pathname of the location, including the leading slash.
+   * @description The pathname of the location, including the leading slash.
    */
   pathname: string
   /**
diff --git a/packages/router-core/src/path.ts b/packages/router-core/src/path.ts
index 827f17c2432..42466128e49 100644
--- a/packages/router-core/src/path.ts
+++ b/packages/router-core/src/path.ts
@@ -97,7 +97,7 @@ export function exactPathTest(
 // /a/b/c + d/ = /a/b/c/d
 // /a/b/c + d/e = /a/b/c/d/e
 interface ResolvePathOptions {
-  basepath: string
+  // basepath: string
   base: string
   to: string
   trailingSlash?: 'always' | 'never' | 'preserve'
@@ -151,16 +151,12 @@ function segmentToString(segment: Segment): string {
 }
 
 export function resolvePath({
-  basepath,
   base,
   to,
   trailingSlash = 'never',
-  caseSensitive,
+  // caseSensitive,
   parseCache,
 }: ResolvePathOptions) {
-  base = removeBasepath(basepath, base, caseSensitive)
-  to = removeBasepath(basepath, to, caseSensitive)
-
   let baseSegments = parsePathname(base, parseCache).slice()
   const toSegments = parsePathname(to, parseCache)
 
@@ -201,7 +197,8 @@ export function resolvePath({
   }
 
   const segmentValues = baseSegments.map(segmentToString)
-  const joined = joinPaths([basepath, ...segmentValues])
+  // const joined = joinPaths([basepath, ...segmentValues])
+  const joined = joinPaths(segmentValues)
   return joined
 }
 
@@ -491,17 +488,11 @@ function encodePathParam(value: string, decodeCharMap?: Map<string, string>) {
 }
 
 export function matchPathname(
-  basepath: string,
   currentPathname: string,
   matchLocation: Pick<MatchLocation, 'to' | 'fuzzy' | 'caseSensitive'>,
   parseCache?: ParsePathnameCache,
 ): AnyPathParams | undefined {
-  const pathParams = matchByPath(
-    basepath,
-    currentPathname,
-    matchLocation,
-    parseCache,
-  )
+  const pathParams = matchByPath(currentPathname, matchLocation, parseCache)
   // const searchMatched = matchBySearch(location.search, matchLocation)
 
   if (matchLocation.to && !pathParams) {
@@ -511,49 +502,7 @@ export function matchPathname(
   return pathParams ?? {}
 }
 
-export function removeBasepath(
-  basepath: string,
-  pathname: string,
-  caseSensitive: boolean = false,
-) {
-  // normalize basepath and pathname for case-insensitive comparison if needed
-  const normalizedBasepath = caseSensitive ? basepath : basepath.toLowerCase()
-  const normalizedPathname = caseSensitive ? pathname : pathname.toLowerCase()
-
-  switch (true) {
-    // default behaviour is to serve app from the root - pathname
-    // left untouched
-    case normalizedBasepath === '/':
-      return pathname
-
-    // shortcut for removing the basepath if it matches the pathname
-    case normalizedPathname === normalizedBasepath:
-      return ''
-
-    // in case pathname is shorter than basepath - there is
-    // nothing to remove
-    case pathname.length < basepath.length:
-      return pathname
-
-    // avoid matching partial segments - strict equality handled
-    // earlier, otherwise, basepath separated from pathname with
-    // separator, therefore lack of separator means partial
-    // segment match (`/app` should not match `/application`)
-    case normalizedPathname[normalizedBasepath.length] !== '/':
-      return pathname
-
-    // remove the basepath from the pathname if it starts with it
-    case normalizedPathname.startsWith(normalizedBasepath):
-      return pathname.slice(basepath.length)
-
-    // otherwise, return the pathname as is
-    default:
-      return pathname
-  }
-}
-
 export function matchByPath(
-  basepath: string,
   from: string,
   {
     to,
@@ -562,14 +511,7 @@ export function matchByPath(
   }: Pick<MatchLocation, 'to' | 'caseSensitive' | 'fuzzy'>,
   parseCache?: ParsePathnameCache,
 ): Record<string, string> | undefined {
-  // check basepath first
-  if (basepath !== '/' && !from.startsWith(basepath)) {
-    return undefined
-  }
-  // Remove the base path from the pathname
-  from = removeBasepath(basepath, from, caseSensitive)
-  // Default to to $ (wildcard)
-  to = removeBasepath(basepath, `${to ?? '$'}`, caseSensitive)
+  const stringTo = to as string
 
   // Parse the from and to
   const baseSegments = parsePathname(
@@ -577,7 +519,7 @@ export function matchByPath(
     parseCache,
   )
   const routeSegments = parsePathname(
-    to.startsWith('/') ? to : `/${to}`,
+    stringTo.startsWith('/') ? stringTo : `/${stringTo}`,
     parseCache,
   )
 
diff --git a/packages/router-core/src/rewriteBasepath.ts b/packages/router-core/src/rewriteBasepath.ts
new file mode 100644
index 00000000000..570ce27c8b7
--- /dev/null
+++ b/packages/router-core/src/rewriteBasepath.ts
@@ -0,0 +1,27 @@
+import { joinPaths, trimPath } from './path'
+import type { LocationRewrite } from './router'
+
+export function rewriteBasepath(
+  basepath: string,
+  rewrite?: LocationRewrite,
+  opts?: {
+    caseSensitive?: boolean
+  },
+): LocationRewrite {
+  const trimmedBasepath = trimPath(basepath)
+  return {
+    fromHref: ({ href }) => {
+      const url = new URL(href)
+      url.pathname = url.pathname.replace(
+        new RegExp(`^/${trimmedBasepath}/`, opts?.caseSensitive ? '' : 'i'),
+        '/',
+      )
+      return rewrite?.fromHref ? rewrite.fromHref({ href: url.href }) : url.href
+    },
+    toHref: ({ href }) => {
+      const url = new URL(href)
+      url.pathname = joinPaths(['/', trimmedBasepath, url.pathname])
+      return rewrite?.toHref ? rewrite.toHref({ href: url.href }) : url.href
+    },
+  }
+}
diff --git a/packages/router-core/src/router.ts b/packages/router-core/src/router.ts
index 62a38d0150e..eefa92d044c 100644
--- a/packages/router-core/src/router.ts
+++ b/packages/router-core/src/router.ts
@@ -19,7 +19,6 @@ import {
   SEGMENT_TYPE_WILDCARD,
   cleanPath,
   interpolatePath,
-  joinPaths,
   matchPathname,
   parsePathname,
   resolvePath,
@@ -34,6 +33,7 @@ import { rootRouteId } from './root'
 import { isRedirect, redirect } from './redirect'
 import { createLRUCache } from './lru-cache'
 import { loadMatches, loadRouteChunk, routeNeedsPreload } from './load-matches'
+import { rewriteBasepath } from './rewriteBasepath'
 import type { ParsePathnameCache, Segment } from './path'
 import type { SearchParser, SearchSerializer } from './searchParams'
 import type { AnyRedirect, ResolvedRedirect } from './redirect'
@@ -266,6 +266,18 @@ export interface RouterOptions<
   /**
    * The basepath for then entire router. This is useful for mounting a router instance at a subpath.
    *
+   * @deprecated - use `rewrite.fromURL` with the new `rewriteBasepath` utility instead:
+   * ```ts
+   * const router = createRouter({
+   *   routeTree,
+   *   rewrite: rewriteBasepath('/basepath')
+   *   // Or wrap existing rewrite functionality
+   *   rewrite: rewriteBasepath('/basepath', {
+   *     toURL: ({ url }) => {...},
+   *     fromURL: ({ url }) => {...},
+   *   })
+   * })
+   * ```
    * @default '/'
    * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#basepath-property)
    */
@@ -431,28 +443,44 @@ export interface RouterOptions<
 
   serializationAdapters?: TSerializationAdapters
   /**
-   * Configures how the router will rewrite the location between the actual URL and the internal URL of the router.
+   * Configures how the router will rewrite the location between the actual href and the internal href of the router.
    *
    * @default undefined
+   * @description You can provide a custom rewrite pair (in/out) or use the utilities like `rewriteBasepath` as a convenience for common use cases, or even do both!
+   * This is useful for basepath rewriting, shifting data from the origin to the path (for things like )
    */
-  rewrite?: {
-    /**
-     * A function that will be called to rewrite the URL before it is interpreted by the router from the history instance.
-     *
-     * @default undefined
-     * @returns The rewritten URL or undefined if no rewrite is needed.
-     */
-    fromURL?: ({ url }: { url: URL }) => undefined | URL | string
-    /**
-     * A function that will be called to rewrite the URL before it is committed to the actual history instance from the router.
-     *
-     * @default undefined
-     * @returns The rewritten URL or undefined if no rewrite is needed.
-     */
-    toURL?: ({ url }: { url: URL }) => undefined | URL | string
-  }
+  rewrite?: LocationRewrite
 }
 
+export type LocationRewrite = {
+  /**
+   * A function that will be called to rewrite the URL before it is interpreted by the router from the history instance.
+   * Utilities like `rewriteBasepath` are provided as a convenience for common use cases.
+   *
+   * @default undefined
+   */
+  fromHref?: LocationRewriteFunction
+  /**
+   * A function that will be called to rewrite the URL before it is committed to the actual history instance from the router.
+   * Utilities like `rewriteBasepath` are provided as a convenience for common use cases.
+   *
+   * @default undefined
+   */
+  toHref?: LocationRewriteFunction
+}
+
+/**
+ * A function that will be called to rewrite the URL.
+ *
+ * @param url The URL to rewrite.
+ * @returns The rewritten URL (as a URL instance or full href string) or undefined if no rewrite is needed.
+ */
+export type LocationRewriteFunction = ({
+  href,
+}: {
+  href: string
+}) => undefined | string
+
 export interface RouterState<
   in out TRouteTree extends AnyRoute = AnyRoute,
   in out TRouteMatch = MakeRouteMatchUnion,
@@ -845,6 +873,7 @@ export class RouterCore<
   >
   history!: TRouterHistory
   latestLocation!: ParsedLocation<FullSearchSchema<TRouteTree>>
+  // @deprecated - basepath functionality is now implemented via the `rewrite` option
   basepath!: string
   routeTree!: TRouteTree
   routesById!: RoutesById<TRouteTree>
@@ -912,7 +941,6 @@ export class RouterCore<
       )
     }
 
-    const previousOptions = this.options
     this.options = {
       ...this.options,
       ...newOptions,
@@ -929,21 +957,6 @@ export class RouterCore<
         )
       : undefined
 
-    if (
-      !this.basepath ||
-      (newOptions.basepath && newOptions.basepath !== previousOptions.basepath)
-    ) {
-      if (
-        newOptions.basepath === undefined ||
-        newOptions.basepath === '' ||
-        newOptions.basepath === '/'
-      ) {
-        this.basepath = '/'
-      } else {
-        this.basepath = `/${trimPath(newOptions.basepath)}`
-      }
-    }
-
     if (
       !this.history ||
       (this.options.history && this.options.history !== this.history)
@@ -952,7 +965,7 @@ export class RouterCore<
         this.options.history ??
         ((this.isServer
           ? createMemoryHistory({
-              initialEntries: [this.basepath || '/'],
+              initialEntries: ['/'],
             })
           : createBrowserHistory()) as TRouterHistory)
       this.updateLatestLocation()
@@ -1050,37 +1063,43 @@ export class RouterCore<
     previousLocation,
   ) => {
     const parse = ({
-      url,
+      href: publicHref,
       state,
     }: HistoryLocation): ParsedLocation<FullSearchSchema<TRouteTree>> => {
+      // For backwards compatibility, we support a basepath option, which we now implement as a rewrite
+      let href = publicHref
+
+      if (this.options.basepath) {
+        href =
+          rewriteBasepath(this.options.basepath).fromHref?.({ href }) || href
+      }
+
       // Before we do any processing, we need to allow rewrites to modify the URL
-      if (this.options.rewrite?.fromURL) {
-        url = new URL(this.options.rewrite.fromURL({ url }) || url)
+      if (this.options.rewrite?.fromHref) {
+        href = this.options.rewrite.fromHref({ href }) || href
       }
 
       // Make sure we derive all the properties we need from the URL object now
       // (These used to come from the history location object, but won't in v2)
-
-      const { pathname, search, hash } = url
-
-      const parsedSearch = this.options.parseSearch(search)
+      const url = new URL(href)
+      const parsedSearch = this.options.parseSearch(url.search)
       const searchStr = this.options.stringifySearch(parsedSearch)
-
       // Make sure our final url uses the re-stringified pathname, search, and has for consistency
       // (We were already doing this, so just keeping it for now)
       url.search = searchStr
 
       const fullPath = url.href.replace(url.origin, '')
 
+      const { pathname, hash } = url
+
       return {
-        url,
+        publicHref: href,
+        href,
         fullPath,
         pathname,
         searchStr,
         search: replaceEqualDeep(previousLocation?.search, parsedSearch) as any,
         hash: hash.split('#').reverse()[0] ?? '',
-        // TODO: v2 needs to supply the actual href (full URL) instead of the fullPath
-        href: fullPath,
         state: replaceEqualDeep(previousLocation?.state, state),
       }
     }
@@ -1108,7 +1127,6 @@ export class RouterCore<
 
   resolvePathWithBase = (from: string, path: string) => {
     const resolvedPath = resolvePath({
-      basepath: this.basepath,
       base: from,
       to: cleanPath(path),
       trailingSlash: this.options.trailingSlash,
@@ -1344,7 +1362,7 @@ export class RouterCore<
             ? replaceEqualDeep(previousMatch.params, routeParams)
             : routeParams,
           _strictParams: usedParams,
-          pathname: joinPaths([this.basepath, interpolatedPath]),
+          pathname: interpolatedPath,
           updatedAt: Date.now(),
           search: previousMatch
             ? replaceEqualDeep(previousMatch.search, preMatchSearch)
@@ -1449,7 +1467,6 @@ export class RouterCore<
     return getMatchedRoutes({
       pathname,
       routePathname,
-      basepath: this.basepath,
       caseSensitive: this.options.caseSensitive,
       routesByPath: this.routesByPath,
       routesById: this.routesById,
@@ -1641,28 +1658,38 @@ export class RouterCore<
       // Create the full path of the location
       const fullPath = `${nextPathname}${searchStr}${hashStr}`
 
-      // Create the URL object
-      let url = new URL(fullPath, currentLocation.url.origin)
+      // Create the new href with full origin
+      const href = new URL(fullPath, new URL(currentLocation.href).origin).href
+
+      let publicHref = href
 
       // If a rewrite function is provided, use it to rewrite the URL
-      if (this.options.rewrite?.toURL) {
-        url = new URL(this.options.rewrite.toURL({ url }) || url)
+      if (this.options.rewrite?.toHref) {
+        publicHref =
+          this.options.rewrite.toHref({ href: publicHref }) || publicHref
+      }
+
+      // For backwards compatibility, we support a basepath option, which we now implement as a rewrite
+      if (this.options.basepath) {
+        publicHref =
+          rewriteBasepath(this.options.basepath).toHref?.({
+            href: publicHref,
+          }) || publicHref
       }
 
       // Lastly, allow the history type to modify the URL
-      url = new URL(this.history.createHref(url.toString()))
+      publicHref = this.history.createHref(publicHref)
 
       // Return the next location
       return {
-        url,
+        publicHref,
+        href,
+        fullPath,
         pathname: nextPathname,
         search: nextSearch,
         searchStr,
         state: nextState as any,
         hash: hash ?? '',
-        fullPath,
-        // TODO: v2 needs to supply the actual href (full URL) instead of the fullPath
-        href: fullPath,
         unmaskOnReload: dest.unmaskOnReload,
       }
     }
@@ -1680,7 +1707,6 @@ export class RouterCore<
 
         const foundMask = this.options.routeMasks?.find((d) => {
           const match = matchPathname(
-            this.basepath,
             next.pathname,
             {
               to: d.from,
@@ -1754,7 +1780,9 @@ export class RouterCore<
       return isEqual
     }
 
-    const isSameUrl = this.latestLocation.fullPath === next.fullPath
+    const isSameUrl =
+      trimPathRight(this.latestLocation.fullPath) ===
+      trimPathRight(next.fullPath)
 
     const previousCommitPromise = this.commitLocationPromise
     this.commitLocationPromise = createControlledPromise<void>(() => {
@@ -1803,7 +1831,7 @@ export class RouterCore<
       this.shouldViewTransition = viewTransition
 
       this.history[next.replace ? 'replace' : 'push'](
-        nextHistory.href,
+        nextHistory.publicHref,
         nextHistory.state,
         { ignoreBlocker },
       )
@@ -1865,7 +1893,7 @@ export class RouterCore<
     if (reloadDocument) {
       if (!href) {
         const location = this.buildLocation({ to, ...rest } as any)
-        href = location.url.href
+        href = location.href
       }
       if (rest.replace) {
         window.location.replace(href)
@@ -1893,7 +1921,7 @@ export class RouterCore<
     if (this.isServer) {
       // for SPAs on the initial load, this is handled by the Transitioner
       const nextLocation = this.buildLocation({
-        to: this.latestLocation.url.pathname,
+        to: this.latestLocation.pathname,
         search: true,
         params: true,
         hash: true,
@@ -1915,9 +1943,10 @@ export class RouterCore<
         trimPath(normalizeUrl(this.latestLocation.fullPath)) !==
         trimPath(normalizeUrl(nextLocation.fullPath))
       ) {
-        throw redirect({ href: nextLocation.url.href })
+        throw redirect({ href: nextLocation.href })
       }
     }
+
     // Match the routes
     const pendingMatches = this.matchRoutes(this.latestLocation)
 
@@ -2063,6 +2092,7 @@ export class RouterCore<
           this.latestLoadPromise = undefined
           this.commitLocationPromise = undefined
         }
+
         resolve()
       })
     })
@@ -2361,7 +2391,6 @@ export class RouterCore<
       : this.state.resolvedLocation || this.state.location
 
     const match = matchPathname(
-      this.basepath,
       baseLocation.pathname,
       {
         ...opts,
@@ -2697,7 +2726,6 @@ export function processRouteTree<TRouteLike extends RouteLike>({
 export function getMatchedRoutes<TRouteLike extends RouteLike>({
   pathname,
   routePathname,
-  basepath,
   caseSensitive,
   routesByPath,
   routesById,
@@ -2706,7 +2734,6 @@ export function getMatchedRoutes<TRouteLike extends RouteLike>({
 }: {
   pathname: string
   routePathname?: string
-  basepath: string
   caseSensitive?: boolean
   routesByPath: Record<string, TRouteLike>
   routesById: Record<string, TRouteLike>
@@ -2717,7 +2744,6 @@ export function getMatchedRoutes<TRouteLike extends RouteLike>({
   const trimmedPath = trimPathRight(pathname)
   const getMatchedParams = (route: TRouteLike) => {
     const result = matchPathname(
-      basepath,
       trimmedPath,
       {
         to: route.fullPath,
diff --git a/packages/router-core/tests/path.test.ts b/packages/router-core/tests/path.test.ts
index 2a241bcb77d..7546f38f341 100644
--- a/packages/router-core/tests/path.test.ts
+++ b/packages/router-core/tests/path.test.ts
@@ -7,95 +7,12 @@ import {
   interpolatePath,
   matchPathname,
   parsePathname,
-  removeBasepath,
   removeTrailingSlash,
   resolvePath,
   trimPathLeft,
 } from '../src/path'
 import type { Segment as PathSegment } from '../src/path'
 
-describe('removeBasepath', () => {
-  it.each([
-    {
-      name: '`/` should leave pathname as-is',
-      basepath: '/',
-      pathname: '/path',
-      expected: '/path',
-    },
-    {
-      name: 'should return empty string if basepath is the same as pathname',
-      basepath: '/path',
-      pathname: '/path',
-      expected: '',
-    },
-    {
-      name: 'should remove basepath from the beginning of the pathname',
-      basepath: '/app',
-      pathname: '/app/path/app',
-      expected: '/path/app',
-    },
-    {
-      name: 'should remove multisegment basepath from the beginning of the pathname',
-      basepath: '/app/new',
-      pathname: '/app/new/path/app/new',
-      expected: '/path/app/new',
-    },
-    {
-      name: 'should remove basepath only in case it matches segments completely',
-      basepath: '/app',
-      pathname: '/application',
-      expected: '/application',
-    },
-    {
-      name: 'should remove multisegment basepath only in case it matches segments completely',
-      basepath: '/app/new',
-      pathname: '/app/new-application',
-      expected: '/app/new-application',
-    },
-  ])('$name', ({ basepath, pathname, expected }) => {
-    expect(removeBasepath(basepath, pathname)).toBe(expected)
-  })
-  describe('case sensitivity', () => {
-    describe('caseSensitive = true', () => {
-      it.each([
-        {
-          name: 'should not remove basepath from the beginning of the pathname',
-          basepath: '/app',
-          pathname: '/App/path/App',
-          expected: '/App/path/App',
-        },
-        {
-          name: 'should not remove basepath from the beginning of the pathname with multiple segments',
-          basepath: '/app/New',
-          pathname: '/App/New/path/App',
-          expected: '/App/New/path/App',
-        },
-      ])('$name', ({ basepath, pathname, expected }) => {
-        expect(removeBasepath(basepath, pathname, true)).toBe(expected)
-      })
-    })
-
-    describe('caseSensitive = false', () => {
-      it.each([
-        {
-          name: 'should remove basepath from the beginning of the pathname',
-          basepath: '/App',
-          pathname: '/app/path/app',
-          expected: '/path/app',
-        },
-        {
-          name: 'should remove multisegment basepath from the beginning of the pathname',
-          basepath: '/App/New',
-          pathname: '/app/new/path/app',
-          expected: '/path/app',
-        },
-      ])('$name', ({ basepath, pathname, expected }) => {
-        expect(removeBasepath(basepath, pathname, false)).toBe(expected)
-      })
-    })
-  })
-})
-
 describe.each([{ basepath: '/' }, { basepath: '/app' }, { basepath: '/app/' }])(
   'removeTrailingSlash with basepath $basepath',
   ({ basepath }) => {
@@ -167,39 +84,32 @@ describe.each([{ basepath: '/' }, { basepath: '/app' }, { basepath: '/app/' }])(
 
 describe('resolvePath', () => {
   describe.each([
-    ['/', '/', '/', '/'],
-    ['/', '/', '/a', '/a'],
-    ['/', '/', 'a/', '/a'],
-    ['/', '/', '/a/b', '/a/b'],
-    ['/', 'a', 'b', '/a/b'],
-    ['/a/b', 'c', '/a/b/c', '/a/b/c'],
-    ['/a/b', '/', 'c', '/a/b/c'],
-    ['/a/b', '/', './c', '/a/b/c'],
-    ['/', '/', 'a/b', '/a/b'],
-    ['/', '/', './a/b', '/a/b'],
-    ['/', '/a/b/c', 'd', '/a/b/c/d'],
-    ['/', '/a/b/c', './d', '/a/b/c/d'],
-    ['/', '/a/b/c', './../d', '/a/b/d'],
-    ['/', '/a/b/c/d', './../d', '/a/b/c/d'],
-    ['/', '/a/b/c', '../../d', '/a/d'],
-    ['/', '/a/b/c', '../d', '/a/b/d'],
-    ['/', '/a/b/c', '..', '/a/b'],
-    ['/', '/a/b/c', '../..', '/a'],
-    ['/', '/a/b/c', '../../..', '/'],
-    ['/', '/a/b/c/', '../../..', '/'],
-    ['/products', '/', '/products-list', '/products/products-list'],
-    ['/basepath', '/products', '.', '/basepath/products'],
-  ])('resolves correctly', (base, a, b, eq) => {
-    it(`Base: ${base} - ${a} to ${b} === ${eq}`, () => {
-      expect(resolvePath({ basepath: base, base: a, to: b })).toEqual(eq)
+    ['/', '/', '/'],
+    ['/', '/a', '/a'],
+    ['/', 'a/', '/a'],
+    ['/', '/a/b', '/a/b'],
+    ['a', 'b', '/a/b'],
+    ['/', 'a/b', '/a/b'],
+    ['/', './a/b', '/a/b'],
+    ['/a/b/c', 'd', '/a/b/c/d'],
+    ['/a/b/c', './d', '/a/b/c/d'],
+    ['/a/b/c', './../d', '/a/b/d'],
+    ['/a/b/c/d', './../d', '/a/b/c/d'],
+    ['/a/b/c', '../../d', '/a/d'],
+    ['/a/b/c', '../d', '/a/b/d'],
+    ['/a/b/c', '..', '/a/b'],
+    ['/a/b/c', '../..', '/a'],
+    ['/a/b/c', '../../..', '/'],
+    ['/a/b/c/', '../../..', '/'],
+  ])('resolves correctly', (a, b, eq) => {
+    it(`${a} to ${b} === ${eq}`, () => {
+      expect(resolvePath({ base: a, to: b })).toEqual(eq)
     })
-    it(`Base: ${base} - ${a}/ to ${b} === ${eq} (trailing slash)`, () => {
-      expect(resolvePath({ basepath: base, base: a + '/', to: b })).toEqual(eq)
+    it(`${a}/ to ${b} === ${eq} (trailing slash)`, () => {
+      expect(resolvePath({ base: a + '/', to: b })).toEqual(eq)
     })
-    it(`Base: ${base} - ${a}/ to ${b}/ === ${eq} (trailing slash + trailing slash)`, () => {
-      expect(
-        resolvePath({ basepath: base, base: a + '/', to: b + '/' }),
-      ).toEqual(eq)
+    it(`${a}/ to ${b}/ === ${eq} (trailing slash + trailing slash)`, () => {
+      expect(resolvePath({ base: a + '/', to: b + '/' })).toEqual(eq)
     })
   })
   describe('trailingSlash', () => {
@@ -207,7 +117,6 @@ describe('resolvePath', () => {
       it('keeps trailing slash', () => {
         expect(
           resolvePath({
-            basepath: '/',
             base: '/a/b/c',
             to: 'd/',
             trailingSlash: 'always',
@@ -217,7 +126,6 @@ describe('resolvePath', () => {
       it('adds trailing slash', () => {
         expect(
           resolvePath({
-            basepath: '/',
             base: '/a/b/c',
             to: 'd',
             trailingSlash: 'always',
@@ -229,7 +137,6 @@ describe('resolvePath', () => {
       it('removes trailing slash', () => {
         expect(
           resolvePath({
-            basepath: '/',
             base: '/a/b/c',
             to: 'd/',
             trailingSlash: 'never',
@@ -239,7 +146,6 @@ describe('resolvePath', () => {
       it('does not add trailing slash', () => {
         expect(
           resolvePath({
-            basepath: '/',
             base: '/a/b/c',
             to: 'd',
             trailingSlash: 'never',
@@ -251,7 +157,6 @@ describe('resolvePath', () => {
       it('keeps trailing slash', () => {
         expect(
           resolvePath({
-            basepath: '/',
             base: '/a/b/c',
             to: 'd/',
             trailingSlash: 'preserve',
@@ -261,7 +166,6 @@ describe('resolvePath', () => {
       it('does not add trailing slash', () => {
         expect(
           resolvePath({
-            basepath: '/',
             base: '/a/b/c',
             to: 'd',
             trailingSlash: 'preserve',
@@ -294,7 +198,6 @@ describe('resolvePath', () => {
           const candidate = base + trimPathLeft(to)
           expect(
             resolvePath({
-              basepath: '/',
               base,
               to: candidate,
               trailingSlash: 'never',
@@ -324,7 +227,6 @@ describe('resolvePath', () => {
           const candidate = base + trimPathLeft(to)
           expect(
             resolvePath({
-              basepath: '/',
               base,
               to: candidate,
               trailingSlash: 'never',
@@ -621,7 +523,7 @@ describe('matchPathname', () => {
     ])(
       '$name',
       ({ basepath, input, matchingOptions, expectedMatchedParams }) => {
-        expect(matchPathname(basepath, input, matchingOptions)).toStrictEqual(
+        expect(matchPathname(input, matchingOptions)).toStrictEqual(
           expectedMatchedParams,
         )
       },
@@ -703,7 +605,7 @@ describe('matchPathname', () => {
         },
       },
     ])('$name', ({ input, matchingOptions, expectedMatchedParams }) => {
-      expect(matchPathname('/', input, matchingOptions)).toStrictEqual(
+      expect(matchPathname(input, matchingOptions)).toStrictEqual(
         expectedMatchedParams,
       )
     })
@@ -767,7 +669,7 @@ describe('matchPathname', () => {
         },
       },
     ])('$name', ({ input, matchingOptions, expectedMatchedParams }) => {
-      expect(matchPathname('/', input, matchingOptions)).toStrictEqual(
+      expect(matchPathname(input, matchingOptions)).toStrictEqual(
         expectedMatchedParams,
       )
     })
@@ -826,7 +728,7 @@ describe('matchPathname', () => {
         },
       },
     ])('$name', ({ input, matchingOptions, expectedMatchedParams }) => {
-      expect(matchPathname('/', input, matchingOptions)).toStrictEqual(
+      expect(matchPathname(input, matchingOptions)).toStrictEqual(
         expectedMatchedParams,
       )
     })
diff --git a/packages/solid-router/src/index.tsx b/packages/solid-router/src/index.tsx
index 91d92623c72..bd6e1dfd4bd 100644
--- a/packages/solid-router/src/index.tsx
+++ b/packages/solid-router/src/index.tsx
@@ -11,7 +11,6 @@ export {
   parsePathname,
   interpolatePath,
   matchPathname,
-  removeBasepath,
   matchByPath,
   rootRouteId,
   defaultSerializeError,
@@ -354,3 +353,4 @@ export { ScriptOnce } from './ScriptOnce'
 export { Asset } from './Asset'
 export { HeadContent, useTags } from './HeadContent'
 export { Scripts } from './Scripts'
+export { rewriteBasepath } from '@tanstack/router-core'
diff --git a/packages/start-server-core/src/createStartHandler.ts b/packages/start-server-core/src/createStartHandler.ts
index b401284d940..59de97a0163 100644
--- a/packages/start-server-core/src/createStartHandler.ts
+++ b/packages/start-server-core/src/createStartHandler.ts
@@ -10,6 +10,7 @@ import {
   isResolvedRedirect,
   joinPaths,
   processRouteTree,
+  rewriteBasepath,
   trimPath,
 } from '@tanstack/router-core'
 import { attachRouterServerSsrUtils } from '@tanstack/router-core/ssr/server'
@@ -334,12 +335,16 @@ async function handleServerRoutes(opts: {
   basePath: string
   executeRouter: () => Promise<Response>
 }) {
-  const url = new URL(opts.request.url)
-  const pathname = url.pathname
+  let href = new URL(opts.request.url).href
+
+  if (opts.basePath) {
+    href = rewriteBasepath(opts.basePath).fromHref?.({ href }) || href
+  }
+
+  const pathname = new URL(href).pathname
 
   const serverTreeResult = getMatchedRoutes<AnyServerRouteWithTypes>({
     pathname,
-    basepath: opts.basePath,
     caseSensitive: true,
     routesByPath: opts.processedServerRouteTree.routesByPath,
     routesById: opts.processedServerRouteTree.routesById,

From 2ea6460715fec5eb9560c827cf2db028de05faee Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Sat, 30 Aug 2025 14:46:12 -0600
Subject: [PATCH 34/34] add import

---
 packages/router-core/src/router.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/router-core/src/router.ts b/packages/router-core/src/router.ts
index eefa92d044c..35ccd4d9e04 100644
--- a/packages/router-core/src/router.ts
+++ b/packages/router-core/src/router.ts
@@ -8,6 +8,7 @@ import invariant from 'tiny-invariant'
 import {
   createControlledPromise,
   deepEqual,
+  findLast,
   functionalUpdate,
   last,
   replaceEqualDeep,