v6版本升级后路由组件生命周期差异记录

React Router v6升级后路由组件生命周期差异记录

在将项目从React Router v5升级到v6版本后，我们发现路由组件的生命周期行为发生了显著变化。本文将详细记录这些差异，并提供可复现的代码示例。

主要差异点

1. 组件卸载时机改变 在v5中，当路由切换时，旧组件会先执行componentWillUnmount生命周期。但在v6中，由于使用了新的useNavigate和useParams等hooks，组件卸载逻辑有所调整。

// v5写法
const MyComponent = () => {
  useEffect(() => {
    console.log('组件挂载');
    return () => {
      console.log('组件卸载'); // v5中会正常执行
    };
  }, []);
};

2. 路由参数获取方式变化 v6移除了withRouter高阶组件，需要使用useParams hook来获取路由参数。

// v6写法
import { useParams } from 'react-router-dom';

const UserProfile = () => {
  const { userId } = useParams(); // v5中通过props.params获取
  return <div>User ID: {userId}</div>;
};

3. 导航行为差异 使用useNavigate时，页面跳转的响应速度和组件重渲染时机也与v5不同。