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

Question

所以我目前正在重构一个网站，所以我使用 rrd，它在以前的网站版本中是 v5。现在，该组件不再存在，我们必须使用新组件，您可能知道。

我以前使用 framer-motion 在路线之间进出过渡，如下所示：

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

简单地将 Switch 组件替换为 Routes 组件是行不通的，因为您只能将 Route 组件作为来自的子组件。将移动到路由组件上方的一层导致页面加载时只有一个初始淡入淡出过渡。

新（非安静工作版本）：

<AnimatePresence>
  <PageLayout>
    <motion.div
      initial="initial"
      animate="in"
      variants={pageVariants}
      transition={pageTransition}>
      <Routes>
        <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 />} />
      </Routes>
    </motion.div>
  </PageLayout>
</AnimatePresence>;

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

  const pageVariants = {
    initial: {
      opacity: 0
    },
    in: {
      opacity: 1
    },
    out: {
      opacity: 0
    }
  };

  const pageTransition = {
    type: 'tween',
    ease: 'linear',
    duration: 0.5
  };

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

提前致谢，干杯！

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>

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

Transition between routes in react-router-dom v6.3

html

reactjs

react-router-dom

framer-motion