Heim > Fragen und Antworten > Hauptteil
Ich versuche, mit Framer-Motion einige animierte Pfadrouten zu erstellen, aber die Komponente wird nicht angezeigt und anscheinend gibt es einen Fehler, der besagt, dass die Routen „Home“, „Contact“ und „about“ in „routesWithAnimation.js“ nicht aufgelöst werden können.
import { useLocation } from "react-router-dom"; import { Home } from "./components/Home"; import { About } from "./components/About"; import { Contact } from "./components/Contact"; import { Routes, Route } from "react-router-dom"; function RoutesWithAnimation() { const location = useLocation(); return ( <Routes location={location} key={location.key}> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> </Routes> ); } export default RoutesWithAnimation;
Ich habe versucht, „Standard exportieren“ und „Exportieren“ zu verwenden, aber immer noch das Gleiche. Außerdem habe ich versucht, die Komponente mit oder ohne Klammern zu importieren, und derselbe Fehler kam erneut. Ich habe nach passenden Komponenten- und Routennamen gesucht und auch React-Router-Dom implementiert Das ist App.js
import { BrowserRouter, Route, Routes } from "react-router-dom"; import { useLocation } from "react-router-dom"; import Header from "./components/Header"; import LocationProvider from "./components/locationProvider"; import RoutesWithAnimation from "./components/routesWithAnimation"; import React from "react"; import "./App.css"; function App() { return ( <BrowserRouter> <Header /> <LocationProvider> <RoutesWithAnimation /> </LocationProvider> </BrowserRouter> ); } export default App;
Das ist zu Hause, js
import { motion } from "framer-motion"; import React from "react"; const routeVariants = { initial: { y: "100vh", }, final: { y: "0vh", }, }; export function Home() { return ( <motion.div variants={routeVariants} initial="initial" animate="final" className="home component" > <h1> Home Component </h1> </motion.div> ); }
Dies sind die Kontaktinformationen
import React from "react"; import { motion } from "framer-motion"; const routeVariants = { initial: { y: "100vh", }, final: { y: "0vh", }, }; export function Contact() { return ( <motion.div variants={routeVariants} initial="initial" animate="final" className="contact component" > <h1> Contact Component </h1> </motion.div> ); }
Hier geht es um.js
import React from "react"; import { motion } from "framer-motion"; const routeVariants = { initial: { y: "100vh", }, final: { y: "0vh", }, }; export function About() { return ( <motion.div variants={routeVariants} initial="initial" animate="final" className="about component" > <h1> About Component </h1> </motion.div> ); }
P粉2425357772024-04-05 00:52:48
它们位于同一文件路径中,因此不是 ./components/Home、./components/About 和 ./components/Contact,而是 ./Home – ./About 和 ./Contact