reactjs - Framer 运动页面转换简化代码

Question

所以这个想法是在路由改变时让组件淡入淡出

App.js：

<AnimatePresence>
 <Switch location={location} key={location.pathname}>
   <Route exact path='/' component={Home} />
   <Route exact path='/dashboard' component={Dashboard} />
   <Route exact path='/people' component={People} />
   <Route exact path='/admin' component={Admin} />
 </Switch>
</AnimatePresence>

All the pages：

const container = {
 hidden: {opacity: 0}
 visible: {opacity: 1}
}
<motion.div variants={container} 
            initial='hidden' 
            animate='visible' 
            exit='hidden'>
 ...
</motion.div>

我该怎么做才能写一次并适用于所有人？

标签： reactjsreact-routerframer-motion