React Router DOM v6是否支持类组件？导航报错求最优解

错误原因 #

useNavigate是React Hook，只能在函数组件或自定义Hook内部调用，类组件中直接使用会触发Hook规则报错。

最优修复方案（无需withRouter） #

将导航逻辑抽离到外层函数组件中，用useEffect替代类组件的componentDidMount，原类组件保持结构不变：

import { useNavigate, Outlet, useEffect } from 'react-router-dom'

// 原类组件保留，移除内部导航逻辑
class AppComponent {
  render(): React.ReactNode {
    return (
      <div className='App'>
         <Outlet />
      </div>
    )
  }
}

// 外层函数组件处理导航逻辑
const App = () => {
  const navigate = useNavigate();

  // 对应原componentDidMount生命周期
  useEffect(() => {
    navigate('/phone');
  }, [navigate]);

  return <AppComponent />;
};

export default App;

类组件路由切换动画实现 #

方案1：用framer-motion实现流畅动画 #

1. 安装依赖

npm install framer-motion

2. 修改外层组件添加动画容器

import { useNavigate, Outlet, useEffect, useLocation } from 'react-router-dom'
import { AnimatePresence } from 'framer-motion'

class AppComponent {
  render(): React.ReactNode {
    return (
      <div className='App'>
         {/* 用AnimatePresence包裹Outlet，监听路由变化触发动画 */}
         <AnimatePresence mode="wait">
           <Outlet key={useLocation().pathname} />
         </AnimatePresence>
      </div>
    )
  }
}

const App = () => {
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    navigate('/phone');
  }, [navigate]);

  return <AppComponent />;
};

export default App;

3. 给类组件路由页面加动画效果

以PhoneComponent为例：

import { motion } from 'framer-motion'

class PhoneComponent {
  render(): React.ReactNode {
    return (
      <motion.div
        initial={{ opacity: 0, x: 100 }} // 初始状态：隐藏+右移
        animate={{ opacity: 1, x: 0 }}    // 进入动画：显示+归位
        exit={{ opacity: 0, x: -100 }}    // 退出动画：隐藏+左移
        transition={{ duration: 0.3 }}    // 动画时长
      >
        {/* 类组件内容 */}
      </motion.div>
    )
  }
}

方案2：原生CSS过渡实现 #

如果不想用第三方库，可通过CSS配合路由监听实现：

1. 给Outlet容器添加相对定位，路由组件设置绝对定位：

.route-container {
  position: relative;
}
.route-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: all 0.3s ease;
}

2. 在函数组件中监听路由变化，给当前路由组件添加active类，上一个组件添加exit类，通过CSS控制过渡状态。

内容的提问来源于stack exchange，提问作者Faceless Void