React Hooks调用无效报错求助：带路由动画的作品集网站问题

第一步：修复Invalid Hook Call警告 #

1. 彻底清理重复依赖 #

你之前存在多个package.json的情况，可能导致依赖残留，按以下步骤操作：

• 删除项目根目录下的node_modules文件夹
• 删除package-lock.json（npm）或yarn.lock（yarn）文件
• 检查整个项目目录，确保没有遗留的子目录package.json
• 重新执行npm install（或yarn install）

2. 确保React与React DOM版本匹配 #

打开package.json，确认react和react-dom的版本号完全一致（例如均为^18.2.0）。若版本不匹配，执行以下命令更新：

npm install react@latest react-dom@latest

3. 排查多React副本问题 #

在项目根目录执行以下命令，检查是否存在多个React实例：

npm ls react

如果输出显示多个React条目，找到对应的子目录node_modules并删除，重新安装依赖。

第二步：修正页面切换动画代码 #

你的代码存在AnimatePresence嵌套冗余、动画配置不完善的问题，以下是修正后的代码：

1. App.js（简化结构，移除无用嵌套） #

import { BrowserRouter } from "react-router-dom";
import Header from "./components/Header";
import RoutesWithAnimation from "./components/routesWithAnimation";
import React from "react";
import "./App.css";

function App() {
  return (
    <BrowserRouter>
      <Header />
      <RoutesWithAnimation />
    </BrowserRouter>
  );
}

export default App;

2. RoutesWithAnimation.js（优化AnimatePresence配置） #

import React from "react";
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 } from "framer-motion";

function RoutesWithAnimation() {
  const location = useLocation();
  // mode="wait" 确保前页面退出动画完成后再加载新页面
  return (
    <AnimatePresence mode="wait">
      <Routes location={location} key={location.key}>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </AnimatePresence>
  );
}
export default RoutesWithAnimation;

3. 页面组件示例（Home.js，完善动画配置） #

import { motion } from "framer-motion";
import React from "react";

const routeVariants = {
  initial: { y: "100vh" },
  animate: { 
    y: "0vh",
    transition: { duration: 0.5 }
  },
  exit: { 
    y: "-100vh",
    transition: { duration: 0.5 }
  }
};

export function Home() {
  return (
    <motion.div
      variants={routeVariants}
      initial="initial"
      animate="animate"
      exit="exit"
      className="home component"
    >
      <h1> Home Component </h1>
    </motion.div>
  );
}

About.js、Contact.js请参照上述结构配置相同的动画变体，确保切换时的连贯性

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