React Router MemoryRouter设置basename后路由无法渲染求助

问题根源 #

MemoryRouter是内存路由，所有路由状态都存于内存中，完全不依赖浏览器地址栏的URL。你直接在地址栏输入/web/或/web/list，MemoryRouter根本不会读取这个路径，自然匹配不到路由。而去掉basename时，MemoryRouter默认初始路径是/，刚好和你访问的浏览器根路径巧合匹配，所以能正常渲染。

正确解决方案 #

方式1：用React Router导航组件/钩子跳转 #

使用<Link>组件或者useNavigate钩子触发路由跳转，basename会自动适配到路径上：

import { MemoryRouter, Routes, Route, Link } from 'react-router-dom';
import PageOne from './PageOne';
import PageTwo from './PageTwo';

function App() {
  return (
    <MemoryRouter basename="/web">
      {/* 导航链接自动拼接basename */}
      <div>
        <Link to="/">去PageOne</Link>
        <span> | </span>
        <Link to="/list">去PageTwo</Link>
      </div>
      <Routes>
        <Route path="/" element={<PageOne />} />
        <Route path="/list" element={<PageTwo />} />
      </Routes>
    </MemoryRouter>
  );
}

如果需要编程式导航，使用useNavigate钩子：

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

function PageOne() {
  const navigate = useNavigate();
  return (
    <div>
      <h1>Page One</h1>
      <button onClick={() => navigate('/list')}>跳转到PageTwo</button>
    </div>
  );
}

方式2：初始化时指定起始路由 #

如果想让MemoryRouter启动时直接渲染目标路由，用initialEntries属性设置初始路径（无需带basename，会自动拼接）：

// 初始渲染PageOne（对应内存路径/web/）
<MemoryRouter basename="/web" initialEntries={["/"]}>
  <Routes>
    <Route path="/" element={<PageOne />} />
    <Route path="/list" element={<PageTwo />} />
  </Routes>
</MemoryRouter>

// 初始渲染PageTwo（对应内存路径/web/list）
<MemoryRouter basename="/web" initialEntries={["/list"]}>
  {/* 路由配置不变 */}
</MemoryRouter>

额外提醒 #

如果你的场景需要和浏览器地址栏同步路由（比如普通Web应用），不要用MemoryRouter，改用<BrowserRouter>。设置basename后，地址栏输入/web/或/web/list就能正常匹配路由，但需注意服务器要配置SPA fallback规则（比如Nginx设置try_files $uri $uri/ /index.html）。

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