v6路由组件状态保持方法踩坑：状态恢复技巧分享

在React Router v6升级过程中，路由组件状态保持是一个常见问题。本文分享几种实用的状态恢复方法。

问题场景

升级到v6后，页面切换时组件重新渲染导致状态丢失。例如购物车组件在路由跳转后清空了。

解决方案

1. 使用useLocation + key属性

import { useLocation } from 'react-router-dom';

function Cart() {
  const location = useLocation();
  
  return (
    <div key={location.pathname}>
      {/* 购物车内容 */}
    </div>
  );
}

2. 自定义状态管理Hook

import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function usePersistentState(key, initialValue) {
  const location = useLocation();
  const [state, setState] = useState(() => {
    const saved = sessionStorage.getItem(key);
    return saved ? JSON.parse(saved) : initialValue;
  });
  
  useEffect(() => {
    sessionStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);
  
  return [state, setState];
}

3. 使用React Router的state传递

import { useNavigate } from 'react-router-dom';

function ProductList() {
  const navigate = useNavigate();
  
  const handleSelect = (product) => {
    navigate('/detail', { 
      state: { product, from: 'list' }
    });
  };
}