React-router-dom v6.3 中路由之间的转换

Question

所以我\xc2\xb4m 目前正在重构一个网站，所以我对rrd 进行了重构，它在之前的网站版本中位于v5 上。\n现在，该组件\xc2\xb4t 不再存在，我们必须使用新组件你可能知道。

\n

我之前使用framer-motion 在路线之间进行转换，如下所示：

\n

<Switch location={location} key={location.pathname}>\n  <motion.div\n    initial="initial"\n    animate="in"\n    exit="out"\n    variants={pageVariants}\n    transition={pageTransition}>\n    <Route path="/audit" component={Audit} />\n    <Route exact path="/smartx" component={SmartX} />\n    <Route path="/smartx/erc20" component={TokenGenerator} />\n    <Route path="/createAudit" component={PaymentStatus} />\n    <Route path="/faq" component={FAQ} />\n    <Route path="/support" component={Support} />\n    <Route path="/terms" component={Terms} />\n    <Route path="/policy" component={Policy} />\n    <Route path="/about" component={About} />\n    <Route exact path="/">\n      <Redirect to="/audit" />\n    </Route>\n  </motion.div>\n</Switch>;\n

\n

只需将 Switch 组件替换为 Routes 组件将不会\xc2\xb4 起作用，因为您只能将 Route 组件作为 的子组件。\n将 <motion.div> 在 Routes 组件上向上移动一层只会导致过渡中的一次初始淡入淡出页面加载时。

\n

新的（不是安静的工作版本）：

\n

<AnimatePresence>\n  <PageLayout>\n    <motion.div\n      initial="initial"\n      animate="in"\n      variants={pageVariants}\n      transition={pageTransition}>\n      <Routes>\n        <Route path="/audit" element={<Audit />} />\n        <Route path="/smartx" element={<SmartX />} />\n        <Route path="/faq" element={<FAQ />} />\n        <Route path="/support" element={<Support />} />\n        <Route path="/terms" element={<Terms />} />\n        <Route path="/policy" element={<Policy />} />\n        <Route path="/about" element={<About />} />\n      </Routes>\n    </motion.div>\n  </PageLayout>\n</AnimatePresence>; \n

\n

Framer 运动动画（新旧版本均相同）：

\n

  const pageVariants = {\n    initial: {\n      opacity: 0\n    },\n    in: {\n      opacity: 1\n    },\n    out: {\n      opacity: 0\n    }\n  };\n\n  const pageTransition = {\n    type: 'tween',\n    ease: 'linear',\n    duration: 0.5\n  }; \n

\n

关于如何在每个路由交换机上实现转换有什么想法吗？

\n

Answer 1

我认为你的解决方案已经接近工作。将PageLayout组件移动motion.div到使用当前路径作为 React 键的布局路径中。

例子：

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

const AnimationLayout = () => {
  const { pathname } = useLocation();
  return (
    <PageLayout>
      <motion.div
        key={pathname}
        initial="initial"
        animate="in"
        variants={pageVariants}
        transition={pageTransition}
      >
        <Outlet />
      </motion.div>
    </PageLayout>
  );
};

...

<Routes>
  <Route element={<AnimationLayout />}>
    <Route path="/audit" element={<Audit />} />
    <Route path="/smartx" element={<SmartX />} />
    <Route path="/faq" element={<FAQ />} />
    <Route path="/support" element={<Support />} />
    <Route path="/terms" element={<Terms />} />
    <Route path="/policy" element={<Policy />} />
    <Route path="/about" element={<About />} />
    <Route path="*" element={<Navigate to="/audit" replace />} />
  </Route>
</Routes>