@tanstack/solid-router 1.131.27 → 1.131.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-router",
-  "version": "1.131.27",
+  "version": "1.131.29",
   "description": "Modern and scalable routing for Solid applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -89,7 +89,7 @@
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
     "@tanstack/history": "1.131.2",
-    "@tanstack/router-core": "1.131.27"
+    "@tanstack/router-core": "1.131.28"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",

package/src/Matches.tsx

@@ -38,27 +38,27 @@ declare module '@tanstack/router-core' {
 export function Matches() {
   const router = useRouter()
 
-  const pendingElement = router.options.defaultPendingComponent ? (
-    <router.options.defaultPendingComponent />
-  ) : null
-
   // Do not render a root Suspense during SSR or hydrating from SSR
   const ResolvedSuspense =
     router.isServer || (typeof document !== 'undefined' && router.ssr)
       ? SafeFragment
       : Solid.Suspense
 
-  const inner = (
-    <ResolvedSuspense fallback={pendingElement}>
-      {!router.isServer && <Transitioner />}
-      <MatchesInner />
-    </ResolvedSuspense>
-  )
+  const OptionalWrapper = router.options.InnerWrap || SafeFragment
 
-  return router.options.InnerWrap ? (
-    <router.options.InnerWrap>{inner}</router.options.InnerWrap>
-  ) : (
-    inner
+  return (
+    <OptionalWrapper>
+      <ResolvedSuspense
+        fallback={
+          router.options.defaultPendingComponent ? (
+            <router.options.defaultPendingComponent />
+          ) : null
+        }
+      >
+        {!router.isServer && <Transitioner />}
+        <MatchesInner />
+      </ResolvedSuspense>
+    </OptionalWrapper>
   )
 }
 
@@ -74,8 +74,10 @@ function MatchesInner() {
     select: (s) => s.loadedAt,
   })
 
-  const matchComponent = () =>
-    matchId() ? <Match matchId={matchId()!} /> : null
+  const matchComponent = () => {
+    const id = matchId()
+    return id ? <Match matchId={id} /> : null
+  }
 
   return (
     <matchContext.Provider value={matchId}>

package/src/RouterProvider.tsx

@@ -1,5 +1,6 @@
 import { Matches } from './Matches'
 import { getRouterContext } from './routerContext'
+import { SafeFragment } from './SafeFragment'
 import type * as Solid from 'solid-js'
 import type {
   AnyRouter,
@@ -29,17 +30,15 @@ export function RouterContextProvider<
 
   const routerContext = getRouterContext()
 
-  const provider = (
-    <routerContext.Provider value={router as AnyRouter}>
-      {children()}
-    </routerContext.Provider>
-  )
-
-  if (router.options.Wrap) {
-    return <router.options.Wrap>{provider}</router.options.Wrap>
-  }
+  const OptionalWrapper = router.options.Wrap || SafeFragment
 
-  return provider
+  return (
+    <OptionalWrapper>
+      <routerContext.Provider value={router as AnyRouter}>
+        {children()}
+      </routerContext.Provider>
+    </OptionalWrapper>
+  )
 }
 
 export function RouterProvider<

package/src/link.tsx

@@ -15,7 +15,7 @@ import { useRouter } from './useRouter'
 
 import { useIntersectionObserver } from './utils'
 
-import { useMatch } from './useMatch'
+import { useActiveLocation } from './useActiveLocation'
 import type {
   AnyRouter,
   Constrain,
@@ -133,20 +133,20 @@ export function useLinkProps<
     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 _options = () => ({
-    ...options,
-    from: from(),
-  })
+  const from = getFromPath(options.from)
+
+  const _options = () => {
+    return {
+      ...options,
+      from: from(),
+    }
+  }
 
   const next = Solid.createMemo(() => {
     currentSearch()
+    activeLocation()
     return router.buildLocation(_options() as any)
   })
 

package/src/useActiveLocation.ts

@@ -0,0 +1,61 @@
+import { last } from '@tanstack/router-core'
+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 type UseLocationResult = {
+  activeLocation: Accessor<ParsedLocation>
+  getFromPath: (from?: string) => Accessor<string>
+  setActiveLocation: (location?: ParsedLocation) => void
+}
+
+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)
+
+  createEffect(() => {
+    setActiveLocation(
+      customActiveLocation() ?? useRouterState({ select: (s) => s.location })(),
+    )
+  })
+
+  const matchIndex = useMatch({
+    strict: false,
+    select: (match) => match.index,
+  })
+
+  const getFromPath = (from?: string) =>
+    createMemo(() => {
+      const activeLocationMatches = router.matchRoutes(
+        customActiveLocation() ?? activeLocation(),
+        {
+          _buildLocation: false,
+        },
+      )
+
+      const activeLocationMatch = last(activeLocationMatches)
+
+      return (
+        from ??
+        activeLocationMatch?.fullPath ??
+        router.state.matches[matchIndex()]!.fullPath
+      )
+    })
+
+  return {
+    activeLocation,
+    getFromPath,
+    setActiveLocation: setCustomActiveLocation,
+  }
+}

package/src/useNavigate.tsx

@@ -1,6 +1,6 @@
 import * as Solid from 'solid-js'
 import { useRouter } from './useRouter'
-import { useMatch } from './useMatch'
+import { useActiveLocation } from './useActiveLocation'
 import type {
   AnyRouter,
   FromPathOption,
@@ -15,20 +15,19 @@ export function useNavigate<
 >(_defaultOpts?: {
   from?: FromPathOption<TRouter, TDefaultFrom>
 }): UseNavigateResult<TDefaultFrom> {
-  const { navigate, state } = useRouter()
+  const router = useRouter()
 
-  const matchIndex = useMatch({
-    strict: false,
-    select: (match) => match.index,
-  })
+  const { getFromPath, setActiveLocation } = useActiveLocation(
+    router.latestLocation,
+  )
 
   return ((options: NavigateOptions) => {
-    return navigate({
+    setActiveLocation(router.latestLocation)
+    const from = getFromPath(options.from ?? _defaultOpts?.from)
+
+    return router.navigate({
       ...options,
-      from:
-        options.from ??
-        _defaultOpts?.from ??
-        state.matches[matchIndex()]!.fullPath,
+      from: from(),
     })
   }) as UseNavigateResult<TDefaultFrom>
 }