路由路径不渲染react.js组件
我正在尝试使用framer-motion制作一些动画路径路由，但组件没有出现，并且显然有一个错误说无法在routesWithAnimation.js中解析路由Home、Contact和about。
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;
我尝试使用“导出默认”和“导出”，但仍然相同，而且，我尝试导入带或不带括号的组件，并且再次出现相同的错误。我检查了匹配的组件和路由的名称，我还实现了react-router-dom 这是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;
这是家，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>
);
}
这是联系方式
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>
);
}
这是 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>
);
}