fix: Preserve cached data during concurrent navigation and refetch (#4513)

Co-authored-by: Manuel Schiller <[email protected]>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

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

@@ -339,3 +339,77 @@ test('throw error from beforeLoad when navigating to route', async () => {
   const indexElement = await screen.findByText('fooErrorComponent')
   expect(indexElement).toBeInTheDocument()
 })
+
+test('reproducer #4245', async () => {
+  const LOADER_WAIT_TIME = 500
+  const rootRoute = createRootRoute({})
+
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    loader: async () => {
+      await sleep(LOADER_WAIT_TIME)
+      return 'index'
+    },
+
+    component: () => {
+      const data = indexRoute.useLoaderData()
+      return (
+        <div>
+          <Link to="/foo" data-testid="link-to-foo">
+            foo
+          </Link>
+          {data}
+        </div>
+      )
+    },
+  })
+
+  const fooRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/foo',
+    component: () => (
+      <Link to="/" data-testid="link-to-index">
+        index
+      </Link>
+    ),
+  })
+
+  const routeTree = rootRoute.addChildren([indexRoute, fooRoute])
+  const router = createRouter({ routeTree })
+
+  render(<RouterProvider router={router} />)
+  // We wait for the initial loader to complete
+  await router.load()
+  const fooLink = await screen.findByTestId('link-to-foo')
+
+  expect(fooLink).toBeInTheDocument()
+
+  // We navigate to the foo route
+  fireEvent.click(fooLink)
+
+  // We immediately see the content of the foo route
+  const indexLink = await screen.findByTestId('link-to-index')
+  expect(indexLink).toBeInTheDocument()
+
+  // We navigate to the index route
+  fireEvent.click(indexLink)
+
+  // We immediately see the content of the index route because the stale data is still available
+  const fooLink2 = await screen.findByTestId('link-to-foo')
+  expect(fooLink2).toBeInTheDocument()
+
+  // We navigate to the foo route again
+  fireEvent.click(fooLink2)
+
+  // We immediately see the content of the foo route
+  const indexLink2 = await screen.findByTestId('link-to-index')
+  expect(indexLink2).toBeInTheDocument()
+
+  // We navigate to the index route again
+  fireEvent.click(indexLink2)
+
+  // We now should see the content of the index route immediately because the stale data is still available
+  const fooLink3 = await screen.findByTestId('link-to-foo')
+  expect(fooLink3).toBeInTheDocument()
+})

packages/router-core/src/router.ts

@@ -1790,8 +1790,15 @@ export class RouterCore<
       location: this.latestLocation,
       pendingMatches,
       // If a cached moved to pendingMatches, remove it from cachedMatches
-      cachedMatches: s.cachedMatches.filter((d) => {
-        return !pendingMatches.find((e) => e.id === d.id)
+      cachedMatches: s.cachedMatches.filter((cachedMatch) => {
+        const pendingMatch = pendingMatches.find((e) => e.id === cachedMatch.id)
+
+        if (!pendingMatch) return true
+
+        return (
+          cachedMatch.status === 'success' &&
+          (cachedMatch.isFetching || cachedMatch.loaderData !== undefined)
+        )
       }),
     }))
   }