React Router createHashRouter设置basename后路由匹配失败求助

代码实现 #

main.js #

import React from 'react';
import ReactDOM from 'react-dom/client';

import {
    createHashRouter,
    createBrowserRouter,
    RouterProvider,
} from "react-router-dom";

const routes = [
    {
        path: '/',
        element: <div>Hello world!</div>,
    }
];

const router = createHashRouter(routes, {
        basename: 'transfers'
    }
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
            <RouterProvider router={router} />
    </React.StrictMode>
);

package.json（核心依赖片段） #

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "6.11.2"
  }
}

访问场景与报错 #

访问地址：https://www.localenv.dev/react#transfers

控制台报错：

<Router basename="/transfers"> is not able to match the URL "transfers" because it does not start with the basename, so the <Router> won't render anything.

解决方案 #

问题根源在于Hash路由的basename与URL哈希部分的匹配逻辑冲突，可通过以下方式解决：

• 调整访问URL格式：
  createHashRouter的basename会自动补全开头的/，因此期望哈希部分格式为#/transfers，将访问地址改为https://www.localenv.dev/react#/transfers即可匹配根路由/。

• 修改路由配置适配现有URL：
  如果无法调整访问URL，可移除basename并直接修改路由path：

  const routes = [
      {
          path: '/transfers',
          element: <div>Hello world!</div>,
      }
  ];
  
  const router = createHashRouter(routes);
  

  或者添加兜底路由确保覆盖匹配：

  const routes = [
      {
          path: '/transfers',
          element: <div>Hello world!</div>,
      },
      {
          path: '*',
          element: <div>404 Not Found</div>,
      }
  ];
  

• 明确basename的作用范围：
  Hash路由的basename仅作用于URL的哈希片段（#后的部分），而非URL的路径部分。如果应用部署在/react/路径下，无需将/react加入basename，只需保证哈希部分与basename规则匹配即可。

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