React Router中如何将其他URL重定向到basename对应的基础URL？

你遇到的核心问题是：设置了basename="test"的Router只会处理以/test开头的路径，像/any这类不在该范围内的路径，根本不会进入这个Router的匹配逻辑，所以内部的默认路由（path="*"）完全无效。

下面是两种可行的解决方式：

方法1：用顶层无basename的Router处理全局重定向 #

在应用最外层先套一个不带basename的Router，先拦截所有非/test开头的路径，重定向到/test，再渲染你原本带basename的Router结构：

import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        {/* 匹配/test开头的路径，渲染原有带basename的路由体系 */}
        <Route path="/test/*" element={
          <Router basename="test">
            <Routes>
              {/* 这里放你原本/test下的子路由，示例： */}
              <Route path="/" element={<div>Test首页</div>} />
              <Route path="/page1" element={<div>页面1</div>} />
              {/* 处理/test内部的404，重定向到/test根路径 */}
              <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
          </Router>
        } />
        {/* 所有非/test的路径（如/any）直接重定向到/test */}
        <Route path="*" element={<Navigate to="/test" replace />} />
      </Routes>
    </Router>
  );
}

export default App;

方法2：在应用入口直接判断路径重定向 #

如果是单页应用，也可以在React渲染前，直接通过浏览器路径判断完成重定向：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import App from './App';

// 全局拦截：路径不以/test开头就跳转到/test
if (!window.location.pathname.startsWith('/test')) {
  window.location.href = '/test';
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router basename="test">
    <Routes>
      {/* 你的原有路由配置 */}
      <Route path="/" element={<App />} />
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  </Router>
);

注意点 #

• 优先选方法1，它是React Router原生的路由处理方式，避免直接操作window.location可能引发的渲染生命周期冲突。
• 重定向时加replace属性，能避免在浏览器历史记录中留下原路径的痕迹，让跳转逻辑更干净。

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