react-router-dom@5.3.3中MemoryRouter页面刷新后无法恢复最后访问路径

问题原因 #

MemoryRouter完全在内存中维护路由状态，不会与浏览器地址栏或持久化存储交互，页面刷新时内存中的路由状态被清空，因此会默认回到路由的初始路径。

解决方案 #

通过将路由状态持久化到localStorage/sessionStorage，在应用初始化时读取存储的路径作为MemoryRouter的初始入口，同时监听路由变化实时更新存储的路径，就能实现刷新后恢复最后访问页面的功能。

1. 修改路由入口组件 #

调整MemoryRouter的initialEntries属性，从本地存储中读取上次保存的路径，若没有则使用默认路径：

import { MemoryRouter, Routes, Route } from 'react-router-dom';
import NavLinks from './Nav';
import Home from './Home';
import About from './About';

function App() {
  // 读取本地存储的最后访问路径，默认 fallback 到/home
  const initialPath = localStorage.getItem('lastRoutePath') || '/home';

  return (
    <MemoryRouter initialEntries={[initialPath]}>
      <NavLinks />
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </MemoryRouter>
  );
}

export default App;

2. 在导航组件中监听路由变化并持久化路径 #

在NavLinks组件中，通过useEffect监听路由位置变化，实时将当前路径存入localStorage，确保所有路由跳转场景（包括编程式导航）都能被捕获：

import React, { useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Tooltip, Badge, IconButton } from '@mui/material';
import TrendingUpOutlinedIcon from '@mui/icons-material/TrendingUpOutlined';
import ConfirmationNumberOutlinedIcon from '@mui/icons-material/ConfirmationNumberOutlined';
import classes from './Nav.module.css';

const NavLinks = () => {
  const location = useLocation();
  const pathname = location.pathname;
  const width = window.innerWidth; // 可根据实际需求替换为useMediaQuery等方式获取

  // 监听路由变化，自动保存当前路径到localStorage
  useEffect(() => {
    localStorage.setItem('lastRoutePath', pathname);
  }, [pathname]);

  const handlePath = () => {
    // 保留原有点击逻辑（如果有的话）
  };

  return (
    <nav>
      <ul className={classes.navlinks}>
        <li>
          <Link
            className={`${pathname === '/home' ? classes.active : classes.link}`}
            to='/home'
            onClick={handlePath}
          >
            {width > 1150 ? 'Home' : ''}
            <Tooltip placement='bottom' title='Home'>
              <Badge>
                <IconButton style={{padding: '2px'}}>
                  <TrendingUpOutlinedIcon />
                </IconButton>
              </Badge>
            </Tooltip>
          </Link>
        </li>
        <li>
          <Link
            className={`${pathname === '/about' ? classes.active : classes.link}`}
            to='/about'
            onClick={handlePath}
          >
            {width > 1150 ? 'About' : ''}
            <Tooltip placement='bottom' title='About'>
              <Badge>
                <IconButton style={{padding: '2px'}}>
                  <ConfirmationNumberOutlinedIcon />
                </IconButton>
              </Badge>
            </Tooltip>
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default NavLinks;

额外说明 #

• 若只需在当前浏览器会话中保留路径，可将localStorage替换为sessionStorage，关闭浏览器后存储的路径会被清除。
• 该方案支持带动态参数的路由（如/user/:id），会完整保存带参数的路径。

内容的提问来源于stack exchange，提问作者KARTHIKEYAN.A