React Router：保留已访问路由状态的可行性咨询

当然可行！React Router完全能配合一些策略实现你的需求，不过直接用它的话得加点额外处理，我给你拆解下具体做法，还有更顺手的优化方案：

方式1：让路由组件保持挂载（不卸载） #

默认情况下，React Router切换路由时会把当前组件卸载掉，所以状态自然就没了。你可以换个思路，不让组件卸载——把所有子页面组件都放在同一个父容器里，用CSS的display属性控制显示隐藏，而不是让路由卸载它们。这样组件一直挂载在DOM里，状态就会保留下来。举个例子：

import { Routes, Route, useLocation } from 'react-router-dom';

function ParentContainer() {
  const location = useLocation();

  return (
    <div>
      {/* 所有子页面都渲染，通过display控制是否显示 */}
      <ChildPage1 style={{ display: location.pathname === '/page1' ? 'block' : 'none' }} />
      <ChildPage2 style={{ display: location.pathname === '/page2' ? 'block' : 'none' }} />
      <ChildPage3 style={{ display: location.pathname === '/page3' ? 'block' : 'none' }} />
      <ChildPage4 style={{ display: location.pathname === '/page4' ? 'block' : 'none' }} />
      <ChildPage5 style={{ display: location.pathname === '/page5' ? 'block' : 'none' }} />
    </div>
  );
}

这种方式的好处是简单粗暴，状态自动保留，但缺点是初始渲染时会加载所有子页面，可能拖慢首屏速度；而且如果子页面有依赖路由的副作用（比如useEffect监听路由变化），还得额外调整逻辑。

方式2：将状态提升到父组件/全局 #

把每个子页面的状态提取到它们的共同父组件，然后通过props传递给子页面。这样即使组件被路由卸载，状态也保存在父组件里，返回时再把状态传回去就行。同时，你要获取所有子页面状态的时候，直接在父组件里读取这些状态变量就可以了。示例代码：

import { useState } from 'react';
import { Routes, Route } from 'react-router-dom';

function ParentContainer() {
  // 为每个子页面单独维护状态
  const [page1State, setPage1State] = useState({ checkbox: false, inputValue: '' });
  const [page2State, setPage2State] = useState({ dropdownValue: '', toggle: true });
  const [page3State, setPage3State] = useState({});
  const [page4State, setPage4State] = useState({});
  const [page5State, setPage5State] = useState({});

  // 随时可以调用这个方法获取所有状态
  const getAllPageStates = () => {
    return {
      page1: page1State,
      page2: page2State,
      page3: page3State,
      page4: page4State,
      page5: page5State
    };
  };

  return (
    <Routes>
      <Route 
        path="/page1" 
        element={<ChildPage1 state={page1State} setState={setPage1State} />} 
      />
      <Route 
        path="/page2" 
        element={<ChildPage2 state={page2State} setState={setPage2State} />} 
      />
      {/* 其他页面同理 */}
    </Routes>
  );
}

这种方式更灵活，首屏只渲染当前页面，性能更好；而且获取所有状态的逻辑也很直接。

如果你的应用后续可能变复杂，或者状态需要在更多组件间共享，推荐用Redux、Zustand、Jotai这类全局状态管理库。以Zustand为例（它比Redux更轻量，上手更快），你可以为每个子页面创建独立的状态切片，轻松实现状态持久化和全局访问：

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

// 创建全局状态仓库，还可以加persist中间件实现本地存储
const usePageStore = create(persist((set, get) => ({
  page1: { checkbox: false, inputValue: '' },
  page2: { dropdownValue: '', toggle: true },
  page3: {},
  page4: {},
  page5: {},
  // 更新单个页面的状态
  updatePage1State: (newState) => set({ page1: { ...get().page1, ...newState } }),
  updatePage2State: (newState) => set({ page2: { ...get().page2, ...newState } }),
  // 获取所有页面的状态
  getAllStates: () => {
    const { page1, page2, page3, page4, page5 } = get();
    return { page1, page2, page3, page4, page5 };
  }
}), {
  name: 'page-storage' // 本地存储的key
}));

然后在子页面里使用这个状态：

function ChildPage1() {
  const { page1, updatePage1State } = usePageStore();

  return (
    <div>
      <input
        type="text"
        value={page1.inputValue}
        onChange={(e) => updatePage1State({ inputValue: e.target.value })}
      />
      <input
        type="checkbox"
        checked={page1.checkbox}
        onChange={(e) => updatePage1State({ checkbox: e.target.checked })}
      />
    </div>
  );
}

这种方案的优势很明显：

• 状态和组件完全解耦，不需要依赖父组件传递props
• 可以在应用的任何地方调用getAllStates()获取所有子页面状态
• 配合持久化中间件，即使刷新页面，状态也不会丢失

• React Router本身可以实现需求，但需要配合组件不卸载或者状态提升的策略
• 如果需要频繁获取所有状态，或者应用有扩展需求，全局状态管理工具是更优选择，代码更整洁，维护成本更低

内容的提问来源于stack exchange，提问作者runeks