React Router路由切换时缓存组件保留状态与定时器运行方案

当前Timer组件挂载在路由对应的页面组件（如/路径对应的Dashboard）内部，react-router切换路由时，未匹配的路由元素会被完全卸载，挂载在其内部的Timer组件会随之销毁，定时器被清除、组件状态全部重置。

完全可以实现组件状态保留、定时器持续运行，以下是两种无额外依赖的可靠方案：

方案1：组件层级提升（最推荐，稳定性最高） #

把Timer组件移动到<Routes>容器外层，路由切换只会销毁Routes内部匹配的路由元素，外层的Timer会全程挂载，不会被卸载，状态和定时器自然持续保留。
修改后的App.tsx代码：

export default function App() {
  return (
    <>
      <Provider store={store}>
        <Router>
          {/* Timer放在路由容器外层，全程不卸载 */}
          <Timer />
          <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/settings" element={<Menu />} />
          </Routes>
        </Router>
      </Provider>
    </>
  );
}

如果需要控制Timer在特定页面显示/隐藏，不要用条件渲染卸载组件，搭配useLocation获取当前路径，用CSS控制显隐即可：

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

const Timer = () => {
  const location = useLocation();
  // 配置需要显示Timer的路径
  const showTimer = ['/', '/settings'].includes(location.pathname);

  return (
    <div className="timer-container" style={{ display: showTimer ? 'block' : 'none' }}>
      {/* 原有Timer组件内容保持不变 */}
    </div>
  )
}

方案2：实现缓存路由（不调整组件层级时使用） #

React Router v6本身没有内置组件缓存能力，可以自行实现简单的keep-alive逻辑：把已经渲染过的路由元素缓存下来，路由切换时用CSS隐藏旧路由、显示新路由，全程不卸载已挂载的组件。
缓存路由实现及使用示例：

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

function KeepAliveRoutes({ children }) {
  const location = useLocation();
  // 存储已经挂载过的路由元素
  const cachedRouteMap = useRef(new Map());

  return (
    <>
      {React.Children.map(children, (routeNode) => {
        if (!React.isValidElement(routeNode) || routeNode.type !== Route) return null;
        const { path, element } = routeNode.props;
        
        // 匹配当前路径时更新缓存
        if (path === location.pathname) {
          cachedRouteMap.current.set(path, element);
        }

        const cachedElement = cachedRouteMap.current.get(path);
        if (!cachedElement) return null;
        // 非当前路径的缓存路由用display:none隐藏，不卸载
        return (
          <div style={{ display: path === location.pathname ? 'block' : 'none' }}>
            {cachedElement}
          </div>
        );
      })}
    </>
  );
}

// 替换App里原有的Routes组件
export default function App() {
  return (
    <>
      <Provider store={store}>
        <Router>
          <KeepAliveRoutes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/settings" element={<Menu />} />
          </KeepAliveRoutes>
        </Router>
      </Provider>
    </>
  );
}

你当前的Timer实现靠setInterval每秒对剩余秒数减1，在浏览器后台标签页中，定时器会被降频延迟，长时间运行会出现明显走时误差。建议改为存储计时开始的时间戳，每次触发时通过当前时间戳 - 开始时间戳计算实际已过时长，就算定时器被延迟触发也能保证计时准确。

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