如何在React Router中配置非根目录的服务器页面路由

核心原因 #

你的页面URL包含.html后缀，React Router默认会将整个路径（包括.html）作为匹配依据；同时页面部署在/path1/path2/子路径下，未配置路由前缀导致匹配逻辑错位，所以之前的路由规则均无法命中。

具体解决方案 #

1. 配置路由前缀+匹配HTML后缀路径

如果不想修改服务器配置，直接在React Router中添加basename并匹配带.html的路径：

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

function App() {
  return (
    <Router basename="/path1/path2">
      <Routes>
        {/* 直接匹配当前页面的HTML路径 */}
        <Route path="/myreactpage.html" element={<Home />} />
        {/* 兜底匹配所有未命中的路径 */}
        <Route path="*" element={<Home />} />
      </Routes>
    </Router>
  );
}

2. 服务器端重写URL（推荐）

更规范的做法是让服务器将/path1/path2/myreactpage.html重定向到/path1/path2/，去掉.html后缀，这样React Router可以用简洁路径匹配：

• Nginx配置示例：

  location /path1/path2/myreactpage.html {
    rewrite ^/path1/path2/myreactpage.html$ /path1/path2/ permanent;
  }
  

• Apache .htaccess示例：

  RewriteEngine On
  RewriteRule ^path1/path2/myreactpage.html$ /path1/path2/ [R=301,L]
  

修改后，路由配置可简化为：

<Router basename="/path1/path2">
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="*" element={<Home />} />
  </Routes>
</Router>

3. React端手动处理路径后缀

在组件中通过路由钩子自动去掉.html后缀并重定向：

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

function App() {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    if (location.pathname.endsWith('.html')) {
      const cleanPath = location.pathname.replace(/\.html$/, '');
      navigate(cleanPath, { replace: true });
    }
  }, [location, navigate]);

  return (
    <Routes>
      <Route path="/path1/path2" element={<Home />} />
      <Route path="*" element={<Home />} />
    </Routes>
  );
}

注意事项 #

• 确保使用React Router v6的BrowserRouter组件（而非旧版Router），否则需手动传入history对象。
• 兜底路由path="*"必须放在所有路由的最后，保证它的优先级最低。

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