v6路由组件渲染异常问题排查：避免重复渲染技巧

在React Router v6升级过程中，路由组件渲染异常是一个常见问题，特别是重复渲染现象。本文将深入分析该问题的根源并提供解决方案。

问题现象

在v6版本中，当使用useNavigate或useLocation等hooks时，组件可能会出现不必要的重复渲染。例如：

function UserProfile() {
  const location = useLocation();
  const navigate = useNavigate();
  
  console.log('组件渲染');
  
  return (
    <div>
      <h1>用户资料</h1>
      <p>当前路径: {location.pathname}</p>
    </div>
  );
}

复现步骤

创建一个包含useLocation的组件
在路由配置中使用该组件
切换路由时观察控制台输出
发现每次路由变化都会触发组件重新渲染

根本原因

v6中useLocation返回的对象是引用类型，每次路由变化都会生成新的对象实例，导致依赖该对象的组件无法正确识别变更。

解决方案

方案一：使用useMemo优化

function UserProfile() {
  const location = useLocation();
  
  const locationState = useMemo(() => ({
    pathname: location.pathname,
    search: location.search
  }), [location.pathname, location.search]);
  
  return (
    <div>
      <h1>用户资料</h1>
      <p>当前路径: {locationState.pathname}</p>
    </div>
  );
}

方案二：使用useCallback封装导航函数

function NavigationComponent() {
  const navigate = useNavigate();
  
  const handleNavigation = useCallback((path) => {
    navigate(path);
  }, [navigate]);
  
  return (
    <nav>
      <button onClick={() => handleNavigation('/home')}>首页</button>
    </nav>
  );
}