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

This is a follow-up to #4978.

As picked up by @Sheraff the changes made caused useNavigate to
negatively impact performance specifically with useNavigate being too
reactive to path changes.

This reverts the use of useActiveLocation, that acted as a single
implementation of the logic to determine the from location, and moves
the determination of the from path back to each of Link and useNavigate.
While the core logic is still the same across the implementations the
implication of how it's used and the sources of the required inputs are
different enough that it warrants separate implementations.

This PR does not revert the full change set and still applies to core
reasons and changes for the previous commit in keeping the logic for
determining the from clause the same, i.e. the order of determining the
from path for navigation remains: from clause => current location =>
rendered location.

@Sheraff to advise if this implementation resolves the issues he picked
up.



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* Breaking Changes
* Removed active-location hooks and their associated types from React
and Solid packages.
* Refactor
* Link and navigation now accept an explicit "from" option instead of
deriving it from active-location state.
* New Features
* Added a programmatic Navigate helper for Solid to trigger navigation
on mount.
* Bug Fixes
* More predictable fallback behavior when no explicit "from" is
provided.
* Performance
  * Reduced state subscriptions for minor efficiency gains.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: nlynzaad

e2e/react-router/basic-file-based/src/routeTree.gen.ts

@@ -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/__root.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/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/deep/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/nested/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/$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/path/index.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-a.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/relative-link-b.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>
+  )
+}