React路由组件无法渲染求助（集成Framer-Motion动画）

尝试用framer-motion实现带动画的路由切换，但组件完全不显示，报错提示routesWithAnimation.js中无法解析Home、Contact和About路由。已经试过切换export default/export、调整组件导入方式、核对命名、更新react-router-dom，问题仍未解决。

相关代码如下：

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;

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;

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

Contact.js #

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

1. 修正组件导入路径 #

如果routesWithAnimation.js位于components目录下，导入Home/About/Contact时的相对路径错误——当前文件已经在components目录中，不需要额外添加components/前缀。修改后的导入代码：

import { Home } from "./Home";
import { About } from "./About";
import { Contact } from "./Contact";

同时确认文件名大小写完全匹配（比如Home.js不能写成home.js，Linux/macOS系统会区分文件名大小写）。

2. 移除冗余代码 #

App.js中导入了useLocation但未使用，直接删除该行：

// 移除这行
import { useLocation } from "react-router-dom";

3. 实现正确的路由过渡动画 #

当前写法未使用AnimatePresence包裹路由组件，无法实现路由切换时的过渡效果。修改RoutesWithAnimation.js：

import { useLocation } from "react-router-dom";
import { Home } from "./Home";
import { About } from "./About";
import { Contact } from "./Contact";
import { Routes, Route } from "react-router-dom";
import { AnimatePresence, motion } from "framer-motion";

function RoutesWithAnimation() {
  const location = useLocation();
  
  const routeVariants = {
    initial: { y: "100vh" },
    animate: { y: "0vh" },
    exit: { y: "-100vh" }
  };

  return (
    <AnimatePresence mode="wait">
      <Routes location={location} key={location.pathname}>
        <Route 
          path="/" 
          element={
            <motion.div
              variants={routeVariants}
              initial="initial"
              animate="animate"
              exit="exit"
              transition={{ duration: 0.5 }}
            >
              <Home />
            </motion.div>
          } 
        />
        <Route 
          path="/about" 
          element={
            <motion.div
              variants={routeVariants}
              initial="initial"
              animate="animate"
              exit="exit"
              transition={{ duration: 0.5 }}
            >
              <About />
            </motion.div>
          } 
        />
        <Route 
          path="/contact" 
          element={
            <motion.div
              variants={routeVariants}
              initial="initial"
              animate="animate"
              exit="exit"
              transition={{ duration: 0.5 }}
            >
              <Contact />
            </motion.div>
          } 
        />
      </Routes>
    </AnimatePresence>
  );
}

export default RoutesWithAnimation;

4. 检查LocationProvider（可选） #

如果LocationProvider是自定义组件，确保它正确传递了路由上下文；如果没有特殊需求，可以直接移除该包裹——BrowserRouter已经提供了所需的路由上下文，useLocation可以正常工作。

内容的提问来源于stack exchange，提问作者Andrea Lopez Bravo