React Router v6.4 loader cache does not automatically revalidate on navigation

Resolution

React Router v6.4+ does not automatically re-execute loaders when navigating to a route that is already active and has unchanged parameters. To force a data refresh when returning to a route or updating the view without a URL change, you must use the useRevalidator hook.

Implementation Steps

To manually trigger a refresh of all active loaders on the current page, implement the useRevalidator hook within your component:

import { useRevalidator } from "react-router-dom";

function MyComponent() {
  const revalidator = useRevalidator();

  const handleRefresh = () => {
    // This triggers all active loaders to re-run
    revalidator.revalidate();
  };

  return (
    <button onClick={handleRefresh}>
      Refresh Data
    </button>
  );
}

Technical Explanation

The behavior you are observing is intended. React Router optimizes performance by avoiding redundant network requests if the route match remains identical. Revalidation is typically tied to mutations; when a Form is submitted or useSubmit is called, the router automatically invalidates the cache and re-runs all active loaders to ensure the UI reflects the server-side changes.

Because there is currently no built-in "stale-while-revalidate" configuration or a per-route revalidateOnNavigate flag, the responsibility for cache invalidation falls to the application level. You have two primary paths:

• Action-based: Use action functions for data mutations, which trigger automatic revalidation.
• Manual-based: Use useRevalidator().revalidate() for event-driven refreshes (e.g., window focus or timer-based updates).

Verification

You can verify this behavior by adding a console.log("Loader executed") inside your loader function. You will notice the log does not appear when navigating back to the same route, but it will appear immediately after calling revalidator.revalidate() or submitting a Form.

Diagnostic Detail Needed: Are you attempting to refresh data based on a specific event (like a WebSocket notification) or simply upon the user clicking a navigation link to the current page?