v6路由数据同步

v6路由数据同步踩坑记录

最近在将项目从React Router v5升级到v6时，遇到了一个令人头疼的问题：路由数据同步。这个问题在v6中变得尤为突出。

问题复现

在v6中，我们使用useNavigate和useLocation进行路由跳转，但在页面刷新或直接访问URL时，路由参数无法正确同步到组件状态中。特别是在以下场景：

const Location = () => {
  const location = useLocation();
  const [searchParams, setSearchParams] = useState(new URLSearchParams(location.search));
  
  useEffect(() => {
    setSearchParams(new URLSearchParams(location.search));
  }, [location.search]);
  
  return <div>当前参数: {JSON.stringify(Object.fromEntries(searchParams))}</div>
}

解决方案

最终通过以下方式解决了同步问题：

1. 使用useSearchParams替代手动解析
2. 在组件初始化时正确处理初始状态
3. 添加防抖机制避免重复更新

const Location = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const location = useLocation();
  
  useEffect(() => {
    // 确保参数同步到组件状态
    setSearchParams(searchParams);
  }, [location.search]);
  
  return <div>当前参数: {JSON.stringify(Object.fromEntries(searchParams))}</div>
}

v6的路由API确实更简洁，但数据同步问题需要格外注意。