fix(react-router): ResolvedSuspense to always use React.Suspense never the SafeFragment

packages/react-router/src/Matches.tsx

@@ -109,15 +109,11 @@ export function Matches() {
     <router.options.defaultPendingComponent />
   ) : null
 
-  const ResolvedSuspense = !router.state.matches.length
-    ? React.Suspense
-    : SafeFragment
-
   const inner = (
-    <ResolvedSuspense fallback={pendingElement}>
+    <React.Suspense fallback={pendingElement}>
       <Transitioner />
       <MatchesInner />
-    </ResolvedSuspense>
+    </React.Suspense>
   )
 
   return router.options.InnerWrap ? (

packages/react-router/src/useNavigate.tsx

@@ -21,15 +21,15 @@ export function useNavigate<
 >(_defaultOpts?: {
   from?: FromPathOption<TRouter, TDefaultFrom>
 }): UseNavigateResult<TDefaultFrom> {
-  const router = useRouter()
+  const { navigate } = useRouter()
 
   return React.useCallback(
     (options: NavigateOptions) => {
-      return router.navigate({
+      return navigate({
         ...options,
       })
     },
-    [router],
+    [navigate],
   ) as UseNavigateResult<TDefaultFrom>
 }
 

packages/react-router/tests/link.test.tsx

@@ -5,6 +5,7 @@ import {
   configure,
   fireEvent,
   render,
+  renderHook,
   screen,
   waitFor,
 } from '@testing-library/react'
@@ -24,6 +25,7 @@ import {
   useMatchRoute,
   useParams,
   useRouteContext,
+  useRouterState,
   useSearch,
 } from '../src'
 import { getIntersectionObserverMock } from './utils'
@@ -46,6 +48,72 @@ afterEach(() => {
 })
 
 describe('Link', () => {
+  test('when using renderHook it returns a hook with same content to prove rerender works', async () => {
+    /**
+     * This is the hook that will be testet.
+     *
+     * @returns custom state
+     */
+    const useLocationFromState = () => {
+      const { location } = useRouterState()
+
+      // could return anything just to prove it will work.
+      const memoLocation = React.useMemo(() => {
+        return {
+          href: location.href,
+          pathname: location.pathname,
+        }
+      }, [location.href, location.pathname])
+
+      return memoLocation
+    }
+
+    const IndexComponent = ({ children }: { children: React.ReactNode }) => {
+      return <h1 data-testid="testId">{children}</h1>
+    }
+    const RouterContainer = ({ children }: { children: React.ReactNode }) => {
+      const childrenRef = React.useRef(children)
+      const memoedRouteTree = React.useMemo(() => {
+        const rootRoute = createRootRoute()
+        const indexRoute = createRoute({
+          getParentRoute: () => rootRoute,
+          path: '/',
+          component: () => (
+            <IndexComponent>{childrenRef.current}</IndexComponent>
+          ),
+        })
+        return rootRoute.addChildren([indexRoute])
+      }, [])
+
+      const memoedRouter = React.useMemo(() => {
+        const router = createRouter({
+          routeTree: memoedRouteTree,
+        })
+
+        return router
+      }, [memoedRouteTree])
+      return <RouterProvider router={memoedRouter} />
+    }
+
+    const { result, rerender } = renderHook(
+      () => {
+        return useLocationFromState()
+      },
+      { wrapper: RouterContainer },
+    )
+    await waitFor(() => expect(screen.getByTestId('testId')).toBeVisible())
+    expect(result.current).toBeTruthy()
+
+    const original = result.current
+
+    rerender()
+
+    await waitFor(() => expect(screen.getByTestId('testId')).toBeVisible())
+    const updated = result.current
+
+    expect(original).toBe(updated)
+  })
+
   test('when a Link is disabled', async () => {
     const rootRoute = createRootRoute()
     const indexRoute = createRoute({