v6路由数据持久化

在React Router v6升级过程中，路由数据持久化是一个常见但容易踩坑的问题。v6版本移除了<Switch>组件，改用useRoutes和更灵活的路由配置，但这也带来了数据持久化的挑战。

问题场景：当用户在应用中进行导航时，希望保留某些路由状态或参数。例如，在商品详情页切换不同规格时，页面不应该刷新导致数据丢失。

踩坑记录：

错误做法：直接使用location.state存储复杂对象，遇到序列化问题

// ❌ 错误方式
const location = useLocation();
const [product, setProduct] = useState(location.state?.product);

正确方案：使用useNavigate配合JSON.stringify进行数据存储

// ✅ 正确方式
const navigate = useNavigate();
const handleProductSelect = (product) => {
  navigate(`/product/${product.id}`, {
    state: { product: JSON.stringify(product) }
  });
};

最佳实践：结合useEffect和localStorage实现更完善的持久化

const [persistedData, setPersistedData] = useState(() => {
  const saved = localStorage.getItem('routeData');
  return saved ? JSON.parse(saved) : {};
});

useEffect(() => {
  localStorage.setItem('routeData', JSON.stringify(persistedData));
}, [persistedData]);

升级时务必测试路由跳转、参数传递和状态保持等场景，避免因数据丢失影响用户体验。