Laluan penghalaan tidak menghasilkan komponen react.js

Question

Saya cuba membuat beberapa laluan laluan animasi menggunakan framer-motion, tetapi komponen itu tidak muncul, dan nampaknya terdapat ralat mengatakan laluan Home, Contact dan about tidak boleh diselesaikan dalam 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;

Saya cuba menggunakan "Export Default" dan "Export" tetapi masih sama, juga, saya cuba mengimport komponen dengan atau tanpa kurungan dan ralat yang sama datang lagi. Saya menyemak padanan komponen dan nama laluan, saya juga melaksanakan react-router-dom Ini ialah 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;

Ini rumah, 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>
  );
}

Ini adalah maklumat hubungan

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>
  );
}

Ini mengenai.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>
  );
}

Answer 1

Mereka berada dalam laluan fail yang sama, jadi bukannya ./components/Home, ./components/About dan ./components/Contact, ia adalah ./Home – ./About dan ./Contact