framer motion del marco a mi proyecto, porque quiero hacer algunas animaciones entre páginas, pero ahora me he quedado todo el tiempo en la página de inicio. Estaré agradecido por cualquier ayuda. Aquí está mi código:

 class App extends Component { //(...) location = () => { useLocation(); } //(...) <Router> <nav> {!this.state.setIsAuth ? ( <> <Link to="/">Home</Link> <Link to="/contact">Contact</Link> <Link to="/login"> Login </Link> </> ) : ( <> <Link to="/news"> News </Link> <Link to="/createpost"> Create Post </Link> <Link to="/calendar"> Calendar </Link> <a href="/" onClick={this.signUserOut}> Log Out</a> </>)} </nav> <AnimatePresence> <Routes location={this.location} key={this.location.pathname}> <Route exact path="/" element={<Home />} /> <Route path="/news" element={<News />} /> <Route path="/login" element={<Login setIsAuth={this.signIn} />} /> <Route path="/contact" element={<Contact />} /> <Route path="/createpost" element={<CreatePost setIsAuth={this.signIn} />} /> <Route path="/calendar" element={<Calendar />} /> </Routes> </AnimatePresence> </Router>

y Home.js para mostrarte cómo se ven las estructuras de mis páginas

 class Home extends Component { render() { return ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}> <header className="header"> <div className="header__text-box"> <h1 className="heading__text-box"> <span className="heading-primary--main">TeamWork</span> <span className="heading-primary--sub">THE WAY TO SUCCESS</span> </h1> <a href="#section-options" className="btn btn--accent btn--animated">Take your opportunity</a> </div> </header> </motion.div> ) } }