fix(react-router, solid-router): reduce useNavigate reactivity on path changes

e2e/react-router/basic-file-based/src/routes/__root.tsx

@@ -122,6 +122,14 @@ function RootComponent() {
         >
           redirect
         </Link>{' '}
+        <Link
+          to="/relative"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          relative routing
+        </Link>{' '}
         <Link
           // @ts-expect-error
           to="/this-route-does-not-exist"

e2e/react-router/basic-file-based/src/routes/relative/index.tsx

@@ -0,0 +1,22 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/relative/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div className="p-2">
+      <div className="border-b" data-testid="relative-routing-home">
+        Relative Routing Tests - Home
+      </div>
+      <div>
+        <Link to="/relative/link">Using Links</Link>
+        <Link to="/relative/useNavigate">Using useNavigate</Link>
+      </div>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/relative/link/nested/deep/index.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/relative/link/nested/deep/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div data-testid="relative-link-nested-deep-header">
+      Hello "/relative/link/nested/deep/"!
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/relative/link/nested/index.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/relative/link/nested/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div data-testid="relative-link-nested-header">
+      Hello "/relative/link/nested/"!
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/relative/link/path/$path/index.tsx

@@ -0,0 +1,31 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/relative/link/path/$path/')({
+  component: RouteComponent,
+  loader: ({ params }) => {
+    return params
+  },
+})
+
+function RouteComponent() {
+  const { path } = Route.useParams()
+
+  return (
+    <div className="p-2">
+      <div className="border-b" data-testid="relative-link-path-param-header">
+        Hello from "/relative/links/path/{path}"!
+      </div>
+      <div>
+        <Link
+          from="/relative/link/path"
+          to="./$path"
+          params={{ path: path === 'a' ? 'b' : 'a' }}
+          className="mr-2"
+          data-testid="relative-link-path-param-switchAB"
+        >
+          To {path === 'a' ? 'b' : 'a'}
+        </Link>
+      </div>
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/relative/link/path/index.tsx

@@ -0,0 +1,18 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/relative/link/path/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div className="p-2">
+      <div className="border-b" data-testid="relative-link-path-header">
+        Relative Routing Tests - Path Params
+      </div>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/relative/link/relative-link-a.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/relative/link/relative-link-a')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div data-testid="relative-link-a-header">
+      Hello "/relative/link/relative-link-a"!
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/relative/link/relative-link-b.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/relative/link/relative-link-b')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div data-testid="relative-link-b-header">
+      Hello "/relative/link/relative-link-b"!
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/relative/link/route.tsx

@@ -0,0 +1,103 @@
+import {
+  Link,
+  Outlet,
+  createFileRoute,
+  useNavigate,
+} from '@tanstack/react-router'
+import { useEffect } from 'react'
+
+export const Route = createFileRoute('/relative/link')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    console.log('navigate')
+  }, [navigate])
+
+  return (
+    <div className="p-2">
+      <div className="border-b" data-testid="relative-link-header">
+        Relative Routing - Links - Index
+      </div>
+      <div>
+        <Link
+          from="/relative/link"
+          to=".."
+          data-testid="relative-link-home"
+          className="mr-2 underline"
+        >
+          Return To Home
+        </Link>
+        <Link
+          from="/relative/link"
+          to="."
+          data-testid="relative-link-index"
+          className="mr-2"
+        >
+          Return To Index
+        </Link>
+        <Link
+          to="."
+          data-testid="relative-link-reload"
+          className="mr-2 underline"
+        >
+          Reload
+        </Link>
+        <Link
+          to=".."
+          data-testid="relative-link-back"
+          className="mr-2 underline"
+        >
+          Back
+        </Link>
+        <Link
+          from="/relative/link"
+          to="./relative-link-a"
+          data-testid="relative-link-a"
+          className="mr-2 underline"
+        >
+          To Relative Link A
+        </Link>
+        <Link
+          from="/relative/link"
+          to="./relative-link-b"
+          data-testid="relative-link-b"
+          className="mr-2 underline"
+        >
+          To Relative Link B
+        </Link>
+        <Link
+          from="/relative/link"
+          to="./nested/deep"
+          data-testid="relative-link-deeply-nested"
+          className="mr-2 underline"
+        >
+          To Deeply Nested
+        </Link>
+        <Link
+          to="/relative/link/path/$path"
+          params={{ path: 'a' }}
+          data-testid="relative-link-path"
+          className="mr-2 underline"
+        >
+          To Path Param A
+        </Link>
+        <Link
+          from="/relative/link"
+          to="./with-search"
+          search={{ searchParam: '1' }}
+          data-testid="relative-link-withSearch"
+          className="mr-2 underline"
+        >
+          To With Search Params
+        </Link>
+      </div>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/relative/link/with-search/index.tsx

@@ -0,0 +1,28 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { z } from 'zod'
+
+export const Route = createFileRoute('/relative/link/with-search/')({
+  component: RouteComponent,
+  validateSearch: z.object({
+    searchParam: z.string().default('1'),
+  }),
+})
+
+function RouteComponent() {
+  const { searchParam } = Route.useSearch()
+  return (
+    <>
+      <div data-testid="relative-link-withSearch-header">
+        Hello "/relative/link/with-search/" searchParam: {searchParam}!
+      </div>
+      <hr />
+      <Link
+        to="."
+        data-testid="relative-link-withSearch-update-param"
+        search={{ searchParam: '2' }}
+      >
+        Update Search
+      </Link>
+    </>
+  )
+}

e2e/react-router/basic-file-based/src/routes/relative/useNavigate/nested/deep/index.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/relative/useNavigate/nested/deep/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div data-testid="relative-useNavigate-nested-deep-header">
+      Hello "/relative/useNavigate/nested/deep/"!
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/relative/useNavigate/nested/index.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/relative/useNavigate/nested/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div data-testid="relative-useNavigate-nested-header">
+      Hello "/relative/useNavigate/nested/"!
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/relative/useNavigate/path/$path/index.tsx

@@ -0,0 +1,40 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/relative/useNavigate/path/$path/')({
+  component: RouteComponent,
+  loader: ({ params }) => {
+    return params
+  },
+})
+
+function RouteComponent() {
+  const navigate = useNavigate()
+
+  const { path } = Route.useParams()
+
+  return (
+    <div className="p-2">
+      <div
+        className="border-b"
+        data-testid="relative-useNavigate-path-param-header"
+      >
+        Hello from "/relative/useNavigate/path/{path}"!
+      </div>
+      <div>
+        <button
+          onClick={() =>
+            navigate({
+              from: '/relative/useNavigate/path',
+              to: './$path',
+              params: { path: path === 'a' ? 'b' : 'a' },
+            })
+          }
+          className="mr-2"
+          data-testid="relative-useNavigate-path-param-switchAB"
+        >
+          To {path === 'a' ? 'b' : 'a'}
+        </button>
+      </div>
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/relative/useNavigate/path/index.tsx

@@ -0,0 +1,18 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/relative/useNavigate/path/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div className="p-2">
+      <div className="border-b" data-testid="relative-useNavigate-path-header">
+        Relative Routing Tests - Path Params
+      </div>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/relative/useNavigate/relative-useNavigate-a.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute(
+  '/relative/useNavigate/relative-useNavigate-a',
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div data-testid="relative-useNavigate-a-header">
+      Hello "/relative/useNavigate/relative-useNavigate-a"!
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/relative/useNavigate/relative-useNavigate-b.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute(
+  '/relative/useNavigate/relative-useNavigate-b',
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div data-testid="relative-useNavigate-b-header">
+      Hello "/relative/useNavigate/relative-useNavigate-b"!
+    </div>
+  )
+}