I'm trying to make some animated path routes using framer-motion, but the component doesn't show up, and apparently there's an error saying the routes Home, Contact and about cannot be resolved in routesWithAnimation.js.
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;
I tried using "Export Default" and "Export" but still the same, also, I tried importing the component with or without brackets and the same error appeared again. I checked for matching component and route names, I also implemented react-router-dom This is 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;
This is home, 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> ); }
This is the contact information
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> ); }
This is about.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
They are in the same file path, so instead of ./components/Home, ./components/About and ./components/Contact, it is ./Home – ./About and ./Contact