React 18中transition(myComponent)失效问题排查与修复

1. 操作中的错误 #

• 高阶组件未返回有效JSX：原transition组件的返回函数里，JSX片段未使用return语句返回，React无法识别渲染内容，直接导致组件无法渲染。
• 过渡动画逻辑错误：原代码将<OgComponent/>与motion.div同级放置，且motion.div内部为空，没有起到包裹组件实现过渡的作用；同时Framer Motion的路由过渡必须结合AnimatePresence组件管理组件的进入/退出动画，原代码缺失这个关键配置。
• 修改后出现404的原因：修改过程中可能误改了组件的路由参数传递逻辑、API请求路径，或是高阶组件包裹时丢失了原组件需要的props（比如路由参数），进而导致TMDB API请求路径错误，返回404。

2. 最可靠的修复方案 #

步骤1：修正高阶组件的JSX返回与props传递 #

确保高阶组件返回有效JSX，用motion组件包裹原组件并传递所有props，避免参数丢失：

import { motion } from "framer-motion";

const Transition = (OgComponent) => {
  return (props) => {
    return (
      <motion.div
        className="page-transition"
        initial={{ opacity: 0, x: -100 }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: 100 }}
        transition={{ duration: 0.3 }}
      >
        <OgComponent {...props} />
      </motion.div>
    );
  };
};

export default Transition;

步骤2：在路由层级配置AnimatePresence #

Framer Motion的退出动画依赖AnimatePresence包裹路由组件，确保路由切换时组件能正确触发exit动画：

import { Routes, Route, useLocation } from "react-router-dom";
import { AnimatePresence } from "framer-motion";
import MovieList from "./components/MovieList";
import ActorDetails from "./components/Actordetails/Actordetails";

function App() {
  const location = useLocation();
  
  return (
    <AnimatePresence mode="wait">
      <Routes location={location} key={location.pathname}>
        <Route path="/" element={<MovieList />} />
        <Route path="/actor/:id" element={<ActorDetails />} />
        {/* 其他路由配置 */}
      </Routes>
    </AnimatePresence>
  );
}

export default App;

步骤3：正确包裹组件导出 #

以MovieList组件为例：

import Transition from "../transition";

// 组件业务代码...

export default Transition(MovieList);

步骤4：校验API请求参数传递 #

确保组件能正确接收并使用路由参数，避免因参数丢失导致API请求错误：

import { useParams } from "react-router-dom";
import axios from "axios";

const ActorDetails = () => {
  const { id } = useParams();
  
  useEffect(() => {
    const fetchActor = async () => {
      try {
        const res = await axios.get(`https://api.themoviedb.org/3/person/${id}?api_key=你的API密钥`);
        // 数据处理逻辑
      } catch (err) {
        console.error(err);
      }
    };
    fetchActor();
  }, [id]);
  
  // 组件渲染逻辑...
};

export default Transition(ActorDetails);

以上方案可同时解决组件无法渲染、过渡动画失效及API 404的问题。

内容的提问来源于stack exchange，提问作者Razvan Zamfir