rersolve inconsistency between solid and react implementation

Author: nlynzaad

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,

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 }
 }

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>
 }
 

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)
   })
 

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 }
 }

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>
 }