React中搭配Framer Motion页面转场的组件实现懒加载时路由加载异常问题求解

现有代码的3个核心触发问题 #

• 预加载逻辑的调用时机错误：目前将OurTeam.preload()这类预加载调用直接写在App组件的函数主体内，每次App组件重渲染都会反复触发预加载请求，既造成无效的重复网络请求，也会因为反复中断渲染流程，和Framer Motion的转场逻辑抢占执行时序，导致预加载完全不生效。
• Suspense嵌套层级错位：目前为每一个懒加载路由单独包裹一层Suspense，配合AnimatePresence的exitBeforeEnter配置，会在旧页面退出动画尚未执行完成时，就直接触发懒加载组件的fallback替换逻辑，直接冲断转场动画流程，甚至因为Suspense中断当前渲染树，导致路由跳转的组件挂载失败。
• AnimatePresence的子节点结构不符合要求：目前AnimatePresence下并列放置了ScrollToTop和Switch两个无key的节点，Framer Motion的AnimatePresence要求直接子节点必须绑定唯一可追踪的key，否则无法正确识别需要进入/退出的动画元素，最终导致转场逻辑和路由挂载逻辑完全错位。

可落地的适配方案 #

1. 修正预加载的触发逻辑 #

• 移除渲染函数体内的无意义重复预加载调用，将全局首次预加载逻辑移到useEffect的空依赖回调中，只在App组件首次挂载完成时执行一次，在页面空闲阶段拉取所有路由的懒加载chunk。
• 优化体验的进阶做法：给导航栏的路由跳转链接增加onMouseEnter、onFocus事件监听，用户还未点击跳转时就提前预加载对应路由的组件chunk，跳转时完全无加载等待，不会打断转场动画。

2. 调整Suspense与AnimatePresence的嵌套结构 #

• 移除每个Route单独包裹的Suspense，在AnimatePresence内部、Switch外层统一放置一个全局的Suspense，保证转场动画执行期间，Suspense的fallback不会打断正在运行的进入/退出动画。
• 给Switch绑定和location绑定的稳定key，保证AnimatePresence可以正确追踪每次路由切换的转场状态。
• 将ScrollToTop组件从AnimatePresence的直接子节点位置移出，放置在Switch内部逻辑中，避免打乱AnimatePresence的子节点追踪逻辑。

修正后的核心代码参考 #

import React, { Suspense, useEffect } from 'react';
import { Switch, Route, useLocation } from 'react-router-dom';
import lazy from "react-lazy-with-preload";
import { AnimatePresence } from 'framer-motion';

// 页面组件导入逻辑保持不变
const Dashboard = lazy(() => import('./components/dashboard/Dashboard'));
const Login = lazy(() => import('./components/authorization/login/LoginComponent'));
const SignUp = lazy(() => import('./components/authorization/signup/SignupComponent'));
const OurTeam  = lazy(() => import( './components/layout/OurTeam/OurTeam'));

function App () {
  const location = useLocation();

  // 仅在组件首次挂载时执行一次预加载，避免重复调用
  useEffect(() => {
    // 可结合requestIdleCallback在页面空闲时执行预加载，不阻塞主线程
    requestIdleCallback(() => {
      OurTeam.preload();
      Login.preload();
      SignUp.preload();
      Dashboard.preload();
    })
  }, [])

  return (
    <div className='page-container'>
      <div className='content-wrap'>
        <Navbar />
        <AnimatePresence exitBeforeEnter>
          {/* 给Switch绑定稳定的追踪key，保证AnimatePresence可正确识别转场 */}
          <Switch location={location} key={location.pathname}>
            {/* 非懒加载首页保持不变 */}
            <Route exact path='/' component={Home} />
            {/* 全局统一的Suspense，放在Switch外层 */}
            <Suspense fallback='Loading...'>
              <Route path='/OurTeam' component={OurTeam} />
              <Route path='/dashboard' component={Dashboard}/>
              <Route path='/login' component={Login} />
              <Route path='/signup' component={SignUp} />
            </Suspense>
            {/* ScrollToTop移到Switch内部，不影响AnimatePresence的子节点结构 */}
            <ScrollToTop/>
          </Switch>
        </AnimatePresence>
      </div>
      <Footer/>
    </div>
  );
}

补充说明：此前使用react-lazy-with-preload失效的核心原因，是预加载逻辑和Suspense的渲染时机不匹配——预加载的Promise还未resolve，就已经被错误嵌套的Suspense触发了挂起状态，导致加载流程被转场逻辑打断。调整嵌套层级和触发时机后，预加载的chunk会在用户跳转前就完成加载，跳转时可以直接触发转场动画，不会出现加载失败的问题。

内容的提问来源于stack exchange，提问作者Andrew B.