Hey there! I totally get where you're coming from—Angular's route resolvers are such a convenient, out-of-the-box way to load data before navigating to a route, and it makes sense to want that same seamless experience with React Router. Let's break down the best ways to achieve this, while avoiding those annoying page flashes.

First, Let's Address the Router.run() Confusion #

You mentioned hearing about Router.run() but not finding it in the docs—this is because that's an old API from React Router v1/v2, which has been completely deprecated for years. So we can safely ignore that and focus on the modern, supported approaches.

The Best Solution: React Router v6+ loader Functions (Official & Seamless) #

If you're using React Router v6 or later, the loader API is exactly what you need—it's the official replacement for Angular-style route resolvers, designed to load data before the route renders, eliminating page flashes entirely.

Step 1: Create Your Async Loader Function #

First, write a function that fetches your data. It receives route parameters and returns a promise with the data:

async function userProfileLoader({ params }) {
  const response = await fetch(`/api/users/${params.userId}`);
  return response.json();
}

Step 2: Attach the Loader to Your Route #

Add the loader to your route configuration when setting up the router:

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/users/:userId',
    element: <UserProfile />,
    loader: userProfileLoader, // Tie the loader to this route
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

Step 3: Access the Loaded Data in Your Component #

Use the useLoaderData() hook to get the preloaded data. Your component will only render after the loader has finished fetching data—no empty state flashes:

import { useLoaderData } from 'react-router-dom';

function UserProfile() {
  const user = useLoaderData();
  return (
    <div className="user-profile">
      <h1>{user.fullName}</h1>
      <p>{user.bio}</p>
      {/* Render other user data */}
    </div>
  );
}

Adding a Loading State (Optional) #

If you want to show a global loading spinner while data loads, use the useNavigation() hook to check the navigation state:

import { useNavigation } from 'react-router-dom';

function App() {
  const navigation = useNavigation();
  return (
    <div className="app-container">
      {navigation.state === 'loading' && (
        <div className="loading-overlay">
          <span>Loading your content...</span>
        </div>
      )}
      <RouterProvider router={router} />
    </div>
  );
}

Why componentWillMount (or Mount Effects) Cause Flashes #

You’re right to avoid componentWillMount (which is actually unsafe now, replaced by useEffect on mount)—these methods render the component first, then start fetching data. This means users see an empty or loading state in the target route before data arrives, causing that annoying flash. The loader function runs before the route is rendered, so the component only loads once data is ready.

For React Router v5 or Earlier (Legacy Approach) #

If you’re stuck on an older version of React Router, you can create a higher-order component (HOC) to wrap your route components and handle preloading. Here’s a quick example:

import { useState, useEffect } from 'react';
import { Route } from 'react-router-dom';

function withPreloader(Component, dataFetcher) {
  return (props) => {
    const [data, setData] = useState(null);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
      const fetchData = async () => {
        const fetchedData = await dataFetcher(props.match.params);
        setData(fetchedData);
        setIsLoading(false);
      };
      fetchData();
    }, [props.match.params, dataFetcher]);

    // Show a loading state (could be a global component) while waiting
    if (isLoading) return <div className="loading-spinner" />;

    return <Component {...props} data={data} />;
  };
}

// Usage
const UserProfileWithData = withPreloader(UserProfile, async (params) => {
  const res = await fetch(`/api/users/${params.userId}`);
  return res.json();
});

// Route setup
<Route path="/users/:userId" component={UserProfileWithData} />

Note: This approach will still render a loading component first, but you can style it to match your app’s UI to make the transition smoother than a flash of empty content.

内容的提问来源于stack exchange，提问作者Jarek