2

当我将“exitBeforeEnter”道具添加到具有嵌套路由的 Animate Presence 组件时，这些路由根本没有呈现，但是当我刷新它们呈现的页面时，删除此道具或直接转到该组件将修复它，但我需要使用 react-router 中的 prop 和重定向组件

这是我的代码：

<AnimatePresence exitBeforeEnter>
                <Switch location={this.props.location} key={this.props.location.pathname} >
                    <Route exact path='/home' component={() => <.../>

                    <Route path='/home/:alpha3Code' component={({match}) =>
                        .... />

                    <Redirect to='/home' />
                </Switch>
</AnimatePresence>
4

4 回答 4

2

从exitBeforeEnter文档

如果设置为true，AnimatePresence一次只会渲染一个组件。退出组件将在渲染进入组件之前完成其退出动画。

您必须为exit您在内部使用的所有组件指定动画AnimatePresence。在路由更改时，AnimatePresence将首先执行exit动画，然后才渲染下一个组件。如果一个组件没有exit动画并且它是 的子组件AnimatePresence，那么路由更改只会更改 url 而不是视图。

于 2020-10-13T05:15:53.690 回答
1

如果您不exit为每条路线添加动画，那是正常的。

AnimatePresense 的主要路线

<AnimatePresence exitBeforeEnter>
  <Switch location={window.location} key={window.location.pathname}>
    <Route exact path='/' component={Home} />
    <Route exact path='/about' component={About} />
    <Route path="*">Page not found</Route>
  </Switch>
</AnimatePresence

关于.jsx

const exit = {
  exit: {
   opacity: 0,
  },
}
export default function About() {
  return <motion.h1 {...exit}>Hello</h1>
}

主页.jsx

const exit = {
  exit: {
   opacity: 0,
  },
}
export default function Home() {
  return <motion.h1 {...exit}>Hello</h1>
}
于 2020-12-22T14:48:39.040 回答
0

有人有 react-router-dom v6 的更新吗？

我正在重写我几个月前制作的一个小应用程序，它之前运行良好，使用AnimatePresence和Switch路由器组件。退出转换在页面更改之间成功运行。

现在由于某种原因，退出转换不会在页面更改时触发，我怀疑这可能是因为对 react-router-dom API 和组件使用所做的更改。

在 react-router-dom v6 中，它看起来更像这样：

const App = function () {
  return (
    <AnimatePresence exitBeforeEnter>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route
              path="characters"
              element={<Characters />}
            />
          </Route>
          <Route path="login" element={<Login />} />
        </Routes>
      </BrowserRouter>
    </AnimatePresence>
  );
};

和Layout组件：

<motion.div
  key="layout"
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
  transition={{ duration: 0.7 }}
>
  <Menu />
  <div>
    <Outlet />
  </div>
</motion.div>

不幸的是，退出转换不会触发。

于 2021-12-20T10:39:28.723 回答
0

对于那些仍然迷路的人，您需要将 <motion.div> 标记包装在 <redirect > 标记周围，并使用其他答案中提到的“exit”参数。下面提供了示例代码。


return (
            <motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show' className='login-container'>
                <Redirect to='/Dashboard' />
            </motion.div>
        );
于 2021-01-01T17:52:31.120 回答