J'essaie de créer des itinéraires de chemin animés à l'aide de framer-motion, mais le composant n'apparaît pas et apparemment, il y a une erreur indiquant que les itinéraires Home, Contact et about ne peuvent pas être résolus dans 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;

J'ai essayé d'utiliser "Export Default" et "Export" mais toujours pareil, j'ai également essayé d'importer le composant avec ou sans crochets et la même erreur est revenue. J'ai vérifié la correspondance des noms de composants et de routes, j'ai également implémenté React-Router-dom C'est 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;

C'est la maison, 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>
  );
}

Voici les coordonnées

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

Il s'agit de.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>
  );
}