RRDv6对象式路由配置下如何设置页面转场动画？

核心思路 #

利用父路由的布局组件（你的CustomLayout）包裹转场组件，通过Outlet渲染子路由页面，结合React Router v6的hooks获取路由信息控制转场效果，完全兼容对象式路由配置。

步骤1：改造CustomLayout布局组件 #

将负责渲染子路由的Outlet包裹在PageTransition组件中，用useLocation获取当前路径作为转场的唯一标识：

import { Outlet, useLocation } from 'react-router-dom';
import { PageTransition } from 'react-page-transition';

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

  return (
    <div className="your-layout-styles">
      {/* 保留原布局的导航、侧边栏等内容 */}
      <PageTransition
        preset="moveToLeftFromRight"
        transitionKey={location.pathname}
      >
        <Outlet />
      </PageTransition>
    </div>
  );
}

步骤2：保持对象式路由配置不变 #

现有路由配置无需大幅修改，子路由的element会自动通过Outlet渲染到转场组件内部：

const router = createBrowserRouter([
  {
    element: <CustomLayout />,
    loader: _ => {
      resetParameters();
      return null;
    },
    children: [
      {
        index: true,
        element: <HomePage />,
        loader: _ => {
          resetParameters();
          return null;
        }
      },
      // 可继续添加其他子路由
      {
        path: '/about',
        element: <AboutPage />
      }
    ]
  }
]);

进阶：给不同路由配置不同转场效果 #

如果需要为特定路由设置自定义转场预设，可在路由配置中添加meta字段，再在CustomLayout中通过useMatches读取：

修改路由配置：

const router = createBrowserRouter([
  {
    element: <CustomLayout />,
    loader: _ => {
      resetParameters();
      return null;
    },
    children: [
      {
        index: true,
        element: <HomePage />,
        loader: _ => {
          resetParameters();
          return null;
        },
        meta: { transitionPreset: 'moveToLeftFromRight' }
      },
      {
        path: '/about',
        element: <AboutPage />,
        meta: { transitionPreset: 'moveToRightFromLeft' }
      }
    ]
  }
]);

更新CustomLayout：

import { Outlet, useLocation, useMatches } from 'react-router-dom';
import { PageTransition } from 'react-page-transition';

function CustomLayout() {
  const location = useLocation();
  const matches = useMatches();
  // 获取当前匹配的路由项
  const currentRoute = matches[matches.length - 1];
  // 读取预设，默认用通用效果
  const transitionPreset = currentRoute.meta?.transitionPreset || 'moveToLeftFromRight';

  return (
    <div className="your-layout-styles">
      <PageTransition
        preset={transitionPreset}
        transitionKey={location.pathname}
      >
        <Outlet />
      </PageTransition>
    </div>
  );
}

适配逻辑说明 #

这种方式完全基于React Router v6原生API：

• Outlet是v6中替代<Switch>渲染子路由的核心组件
• useLocation和useMatches都是v6提供的hooks，可直接获取路由状态
• 转场逻辑和标签式写法一致，仅将<Switch>替换为<Outlet>，完美适配对象式路由，无需退回到v5版本。

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