fix(react-router): do not preload links with reloadDocument: true

TanStack · Dec 17, 2024 · f85edf2 · f85edf2
1 parent 9559b9c
commit f85edf2
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 64 deletions.
diff --git a/e2e/react-router/basic-file-based/src/routes/posts.tsx b/e2e/react-router/basic-file-based/src/routes/posts.tsx
@@ -22,6 +22,7 @@ function PostsComponent() {
                   params={{
                     postId: post.id,
                   }}
+                  reloadDocument={true}
                   className="block py-1 text-blue-600 hover:opacity-75"
                   activeProps={{ className: 'font-bold underline' }}
                 >

diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
@@ -641,10 +641,12 @@ export function useLinkProps<
     () => router.buildLocation(options as any),
     [router, options, currentSearch],
   )
-  const preload = React.useMemo(
-    () => userPreload ?? router.options.defaultPreload,
-    [router.options.defaultPreload, userPreload],
-  )
+  const preload = React.useMemo(() => {
+    if (options.reloadDocument) {
+      return false
+    }
+    return userPreload ?? router.options.defaultPreload
+  }, [router.options.defaultPreload, userPreload, options.reloadDocument])
   const preloadDelay =
     userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0
 
@@ -768,7 +770,7 @@ export function useLinkProps<
 
       // All is well? Navigate!
       // N.B. we don't call `router.commitLocation(next) here because we want to run `validateSearch` before committing
-      router.buildAndCommitLocation({
+      return router.navigate({
         ...options,
         replace,
         resetScroll,

diff --git a/packages/react-router/tests/link.test.tsx b/packages/react-router/tests/link.test.tsx
@@ -48,11 +48,11 @@ beforeEach(() => {
     disconnect: ioDisconnectMock,
   })
   vi.stubGlobal('IntersectionObserver', io)
+  window.history.replaceState(null, 'root', '/')
 })
 
 afterEach(() => {
   vi.resetAllMocks()
-  window.history.replaceState(null, 'root', '/')
   cleanup()
 })
 
@@ -1194,77 +1194,70 @@ describe('Link', () => {
     expect(notFoundComponent).not.toBeCalled()
   })
 
-  test.each([{ reloadDocument: true }, { reloadDocument: false }])(
-    'when navigating to /posts with params',
-    async ({ reloadDocument }) => {
-      const rootRoute = createRootRoute()
-      const indexRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        path: '/',
-        component: () => {
-          return (
-            <>
-              <h1>Index</h1>
-              <Link
-                reloadDocument={reloadDocument}
-                to="/posts/$postId"
-                params={{ postId: 'id1' }}
-              >
-                To first post
-              </Link>
-            </>
-          )
-        },
-      })
-
-      const PostsComponent = () => {
+  test('when navigating to /posts with params', async () => {
+    const rootRoute = createRootRoute()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => {
         return (
           <>
-            <h1>Posts</h1>
-            <Link to="/">Index</Link>
-            <Outlet />
+            <h1>Index</h1>
+            <Link to="/posts/$postId" params={{ postId: 'id1' }}>
+              To first post
+            </Link>
           </>
         )
-      }
+      },
+    })
 
-      const postsRoute = createRoute({
-        getParentRoute: () => rootRoute,
-        path: 'posts',
-        component: PostsComponent,
-      })
+    const PostsComponent = () => {
+      return (
+        <>
+          <h1>Posts</h1>
+          <Link to="/">Index</Link>
+          <Outlet />
+        </>
+      )
+    }
 
-      const PostComponent = () => {
-        const params = useParams({ strict: false })
-        return <span>Params: {params.postId}</span>
-      }
+    const postsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: 'posts',
+      component: PostsComponent,
+    })
 
-      const postRoute = createRoute({
-        getParentRoute: () => postsRoute,
-        path: '$postId',
-        component: PostComponent,
-      })
+    const PostComponent = () => {
+      const params = useParams({ strict: false })
+      return <span>Params: {params.postId}</span>
+    }
 
-      const router = createRouter({
-        routeTree: rootRoute.addChildren([
-          indexRoute,
-          postsRoute.addChildren([postRoute]),
-        ]),
-      })
+    const postRoute = createRoute({
+      getParentRoute: () => postsRoute,
+      path: '$postId',
+      component: PostComponent,
+    })
 
-      render(<RouterProvider router={router} />)
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([
+        indexRoute,
+        postsRoute.addChildren([postRoute]),
+      ]),
+    })
 
-      const postLink = await screen.findByRole('link', {
-        name: 'To first post',
-      })
+    render(<RouterProvider router={router} />)
 
-      expect(postLink).toHaveAttribute('href', '/posts/id1')
+    const postLink = await screen.findByRole('link', {
+      name: 'To first post',
+    })
 
-      fireEvent.click(postLink)
+    expect(postLink).toHaveAttribute('href', '/posts/id1')
 
-      const paramText = await screen.findByText('Params: id1')
-      expect(paramText).toBeInTheDocument()
-    },
-  )
+    fireEvent.click(postLink)
+
+    const paramText = await screen.findByText('Params: id1')
+    expect(paramText).toBeInTheDocument()
+  })
 
   test('when navigating from /posts to ./$postId', async () => {
     const rootRoute = createRootRoute()
@@ -4352,4 +4345,69 @@ describe('search middleware', () => {
     expect(postsLinkSearch.get('root')).toBe('abc')
     expect(postsLink).toHaveAttribute('data-status', 'active')
   })
+
+  describe('reloadDocument', () => {
+    test('link to /posts with params', async () => {
+      const rootRoute = createRootRoute()
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: () => {
+          return (
+            <>
+              <h1>Index</h1>
+              <Link
+                to="/posts/$postId"
+                params={{ postId: 'id1' }}
+                reloadDocument={true}
+                data-testid="link-to-post-1"
+              >
+                To first post
+              </Link>
+            </>
+          )
+        },
+      })
+
+      const PostsComponent = () => {
+        return (
+          <>
+            <h1>Posts</h1>
+            <Link to="/">Index</Link>
+            <Outlet />
+          </>
+        )
+      }
+
+      const postsRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: 'posts',
+        component: PostsComponent,
+      })
+
+      const PostComponent = () => {
+        const params = useParams({ strict: false })
+        return <span>Params: {params.postId}</span>
+      }
+
+      const postRoute = createRoute({
+        getParentRoute: () => postsRoute,
+        path: '$postId',
+        component: PostComponent,
+      })
+
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([
+          indexRoute,
+          postsRoute.addChildren([postRoute]),
+        ]),
+      })
+
+      render(<RouterProvider router={router} />)
+
+      const postLink = await screen.findByTestId('link-to-post-1')
+
+      expect(postLink).toHaveAttribute('href', '/posts/id1')
+    })
+  })
 })