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({