React Router and framer motion Animate Presence

问题

When I added 'exitBeforeEnter' prop to the Animate Presence component with nested routes, the routes didn't render at all but when I refreshed the page they rendered, removing this prop or go to the component directly will fix it, but I need to use the prop and the redirect component from react-router

This is my code:

<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>

回答1:

from exitBeforeEnter docs

If set to true, AnimatePresence will only render one component at a time. The exiting component will finished its exit animation before the entering component is rendered.

You have to specify exit animations for all components that you are using inside AnimatePresence. On route changes, AnimatePresence will execute exit animations first and then only it will render next component. If a component does not have exit animation and it is child of AnimatePresence, then route change will only change the url not the view.

回答2:

That's normal if you will not add an exit animation to each and every routes.

Main route with 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

About.jsx

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

Home.jsx

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

回答3:

For those of you still lost, you need to wrap the <motion.div> tag AROUND the < redirect > tag with an "exit" parameter as mentioned in the other answers. Example code is provided below.


return (
            <motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show' className='login-container'>
                <Redirect to='/Dashboard' />
            </motion.div>
        );

来源：https://stackoverflow.com/questions/63614810/react-router-and-framer-motion-animate-presence

标签

javascript

reactjs

framer-motion