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