React中怎么在路由跳转前预取数据避免白屏？

UP主～永香提问于 2026-03-09 13:05:22 阅读 13

优化

我用React Router做页面跳转，但新页面的数据是进入后才请求的，导致有短暂白屏。听说可以用数据预取解决，但不知道怎么在跳转前就提前加载好数据？

试过在useEffect里请求，但还是等组件挂载后才触发，体验不好。有没有办法在点击链接时就预取？比如下面这种写法能优化吗：

const ProfilePage = () => {
  const [user, setUser] = useState(null);
  const { id } = useParams();

  useEffect(() => {
    fetch(<code>/api/users/${id}</code>).then(res => res.json()).then(setUser);
  }, [id]);

  if (!user) return <div>加载中...</div>;
  return <div>{user.name}</div>;
};

我来解答赞 5 收藏

反馈

1 条解答

IT人佳宜 Lv1

用React Router v6的loader功能，在点击链接时就预加载数据。这样就不会有白屏了：

// router配置

const router = createBrowserRouter([

  {

    path: '/users/:id',

    element: <ProfilePage />,

    loader: async ({ params }) => {

      const res = await fetch(/api/users/${params.id});

      return res.json();

    }

  }

]);



// 组件里直接用useLoaderData获取预加载的数据

function ProfilePage() {

  const user = useLoaderData();

  return <div>{user.name}</div>;

}

这比useEffect快多了，点击链接就开始加载数据。

2026-03-09 13:07