路由状态持久化：v6实现方案

在React Router v6中实现路由状态持久化是升级过程中的重要议题。本文将介绍如何通过自定义Hook和useEffect来实现路由状态的持久化。

核心思路

在v6中，路由状态不再像v5那样自动保持，需要手动实现状态管理。我们可以通过localStorage或sessionStorage来存储路由参数和组件状态。

实现方案

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

const usePersistentState = (key, initialValue) => {
  const [state, setState] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);

  return [state, setState];
};

const PersistentRoute = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const [routeState, setRouteState] = usePersistentState('routeState', {});

  useEffect(() => {
    // 当路由变化时，保存当前状态
    setRouteState(prev => ({
      ...prev,
      [location.pathname]: { timestamp: Date.now() }
    }));
  }, [location.pathname]);

  return <div>持久化路由组件</div>;
};

使用步骤

1. 创建usePersistentState自定义Hook
2. 在需要的组件中使用该Hook
3. 在路由变化时自动保存状态
4. 应用重启时自动恢复状态