diff --git a/packages/react-router/src/Matches.tsx b/packages/react-router/src/Matches.tsx
index f19d000f3c7..738da53cf42 100644
--- a/packages/react-router/src/Matches.tsx
+++ b/packages/react-router/src/Matches.tsx
@@ -109,15 +109,11 @@ export function Matches() {
) : null
- const ResolvedSuspense = !router.state.matches.length
- ? React.Suspense
- : SafeFragment
-
const inner = (
-
+
-
+
)
return router.options.InnerWrap ? (
diff --git a/packages/react-router/src/useNavigate.tsx b/packages/react-router/src/useNavigate.tsx
index d8b3a721730..becc1b36999 100644
--- a/packages/react-router/src/useNavigate.tsx
+++ b/packages/react-router/src/useNavigate.tsx
@@ -21,15 +21,15 @@ export function useNavigate<
>(_defaultOpts?: {
from?: FromPathOption
}): UseNavigateResult {
- const router = useRouter()
+ const { navigate } = useRouter()
return React.useCallback(
(options: NavigateOptions) => {
- return router.navigate({
+ return navigate({
...options,
})
},
- [router],
+ [navigate],
) as UseNavigateResult
}
diff --git a/packages/react-router/tests/link.test.tsx b/packages/react-router/tests/link.test.tsx
index 9ccf2c60872..9bf54202b02 100644
--- a/packages/react-router/tests/link.test.tsx
+++ b/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 {children}
+ }
+ 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: () => (
+ {childrenRef.current}
+ ),
+ })
+ return rootRoute.addChildren([indexRoute])
+ }, [])
+
+ const memoedRouter = React.useMemo(() => {
+ const router = createRouter({
+ routeTree: memoedRouteTree,
+ })
+
+ return router
+ }, [memoedRouteTree])
+ return
+ }
+
+ 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({