React Router Dom v6 HashRouter basename配置失效问题咨询

报错本质是混淆了HashRouter和BrowserRouter的实现逻辑，两者的basename作用范围完全不一样：

• BrowserRouter基于HTML5 History API实现，路由直接对应域名后的pathname段。部署在/admin子目录时配置basename="/admin"是标准操作：路由器会自动剥离pathname里的/admin前缀再匹配路由规则，访问https://你的域名/admin时路径天然带前缀，能正常渲染。
• HashRouter靠URL里#后面的哈希段识别路由，完全不关心#前面的路径是什么，只会解析#后的字符串做路由匹配。给HashRouter配basename="/admin"，等于强制要求#后面的路径必须以/admin开头才会渲染内容。
  你本地启动或者部署后默认打开的地址是类似http://localhost:3000/，#后面是空的，HashRouter解析到的当前路径是/，不符合/admin前缀要求，直接抛错不渲染任何内容。
  package.json里的"homepage": "./admin"只影响打包后静态资源的引用路径，和路由匹配逻辑无关，不是报错原因。

根据实际场景二选一即可：

方案1：保留HashRouter（适合后端无法配置重定向规则的静态部署场景） #

直接删掉HashRouter上的basename属性即可：

// 原代码 <HashRouter basename="/admin">
<HashRouter>

HashRouter的路由全在#后面，哈希变动不会触发服务器请求，不管项目部署在根目录还是/admin这类子目录，只要服务器把子目录下的所有请求都指向index.html，不需要配basename就能正常匹配路由，静态资源路径靠homepage配置就能处理。
改完后访问根地址会自动命中你写的根路由重定向规则，跳转到/configuration页面，所有Link跳转也能正常生效。

方案2：必须给HashRouter保留basename="/admin"配置 #

这种场景下要保证所有访问入口的URL哈希段以/admin开头，也就是默认打开的地址必须是http://localhost:3000/#/admin，直接访问http://localhost:3000/一定会触发报错。
这种配置仅适用于应用本身就需要挂载在哈希段/admin前缀下的特殊场景，普通子目录部署没必要这么做。

如果部署环境的后端支持配置「任意非静态资源路径都重定向到index.html」的规则，优先用BrowserRouter，URL没有#更美观，你之前写的BrowserRouter加basename="/admin"的配置本身是正确的，可以直接使用。

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