Next.js：如何实现路由无关的应用初始化及路由前置数据获取

1. 应用级全局初始化方案 #

直接把全局数据初始化逻辑放在根组件（比如App.js或包裹路由的最外层组件）里，使用不带多余依赖的useEffect即可：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { loadGlobalData } from './store/actions';

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(loadGlobalData());
  }, [dispatch]); // dispatch是Redux提供的稳定引用，不会触发重复执行

  return (
    {/* 你的路由组件、全局布局等内容 */}
  );
}

export default App;

不管用户从哪个路由直接进入，根组件都会被渲染，这个useEffect只会执行一次，完全避免了在多个页面复制代码的问题。另外也可以考虑把初始化逻辑放在Redux的store创建文件（比如store.js）中直接调用异步action，但这种方式会在组件挂载前就执行请求，对于客户端渲染场景，根组件的useEffect时机更稳妥。

2. 路由级数据预加载方案 #

React生态里有几种类似Angular Route Resolver的实现方式：

• React Router v6.4+ 的loader函数：这是官方推荐的方案，在路由配置中定义loader，进入路由前会自动执行并完成数据获取，还能结合Redux把数据存入store：

// 路由配置文件
import { createBrowserRouter } from 'react-router-dom';
import { store } from './store';
import { loadUserProfileData } from './store/actions';
import UserProfile from './pages/UserProfile';

const router = createBrowserRouter([
  {
    path: '/user-profile',
    element: <UserProfile />,
    loader: async () => {
      // 路由进入前预加载数据并存入store
      await store.dispatch(loadUserProfileData());
      return null; // 也可直接返回组件需要的额外数据
    },
  },
]);

进入/user-profile路由时，loader会先执行完成，组件渲染时就能直接使用store中的数据。

• 自定义高阶组件(HOC)：如果使用旧版React Router，可以写一个HOC包裹需要预加载数据的页面组件，统一处理数据加载逻辑：

function withDataLoader(Component, loadAction) {
  return function WrappedComponent(props) {
    const dispatch = useDispatch();
    const isLoaded = useSelector(state => state.userProfile.isLoaded);

    useEffect(() => {
      if (!isLoaded) {
        dispatch(loadAction());
      }
    }, [dispatch, loadAction, isLoaded]);

    // 可添加加载状态提示
    if (!isLoaded) return <div>加载中...</div>;

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

// 使用示例
const UserProfileWithLoader = withDataLoader(UserProfile, loadUserProfileData);

另外，SWR、React Query这类数据请求库自带预加载和缓存机制，结合路由使用也能实现类似Resolver的效果，还能简化数据状态的管理。

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