v6路由状态同步方案

React Router v6相比v5在路由状态管理上有了重大变化，特别是移除了withRouter高阶组件和router属性的传递方式。本文将详细介绍v6中路由状态同步的实践方案。

问题背景

在v5中，我们经常使用withRouter来获取路由信息，或者通过props传递router对象。但v6采用了新的设计模式，所有路由相关状态都通过useLocation、useNavigate等hook来获取。

核心解决方案

1. 使用hooks替代高阶组件

// v5方式
const MyComponent = (props) => {
  console.log(props.location);
  return <div>...</div>;
}

// v6方式
const MyComponent = () => {
  const location = useLocation();
  const navigate = useNavigate();
  return <div>...</div>;
}

2. 路由状态同步最佳实践

对于需要跨组件共享路由状态的场景，可以创建自定义hook：

// hooks/useRouteState.js
import { useLocation, useNavigate } from 'react-router-dom';

export const useRouteState = () => {
  const location = useLocation();
  const navigate = useNavigate();
  
  // 路由状态同步函数
  const updateRouteState = (newState) => {
    const currentPath = location.pathname;
    const searchParams = new URLSearchParams(location.search);
    searchParams.set('state', JSON.stringify(newState));
    navigate(`${currentPath}?${searchParams.toString()}`);
  };
  
  return { location, navigate, updateRouteState };
};

3. 在组件中使用

const MyPage = () => {
  const { location, navigate, updateRouteState } = useRouteState();
  
  useEffect(() => {
    // 同步路由状态到全局状态管理
    if (location.state) {
      // 处理路由状态变化
      console.log('路由状态更新:', location.state);
    }
  }, [location.state]);
  
  return <div>页面内容</div>;
};