React Router Dom HashRouter设置basename后路径重复解决方法

HashRouter的basename属性只会作用在#后的前端路由片段上，不会识别#前的服务端部署子路径。你当前项目部署在/admin子目录下，给HashRouter配置basename="/admin"时，框架会自动把这个值拼接到hash路由部分，最终就出现了/admin/#/admin/dashboard的重复拼接问题。

你当前代码用了Switch组件，属于react-router-dom v5版本，直接按下面的方式调整即可：

• 移除HashRouter组件上的basename="/admin"配置
  #前的/admin属于服务端静态资源部署路径，不归前端路由管控，你只需要在构建配置（vite的base、webpack的publicPath）里把资源公共路径设为/admin/，本地开发或部署时服务端会自动处理这个前缀，不会影响hash部分的路由。
• 修正后的代码示例

import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';

function App() {
  return (
    <>
        <HashRouter>
          <SessionProvider>
            <Switch>
              <Route path="/dashboard" component={Dashboard} />
              <Route path="/users" component={Users} />
              <Redirect from="/" to="/dashboard" />
            </Switch>
          </SessionProvider>
        </HashRouter>
    </>
  );
}

配置完成后访问http://localhost:3000/admin/会自动跳转到dashboard页，地址栏显示为http://localhost:3000/admin/#/dashboard，不会再出现重复的/admin拼接。

补充：如果你不想用hash模式的路由，可以替换为BrowserRouter，这时候配置basename="/admin"才会正确匹配子目录部署场景，最终地址为无#的http://localhost:3000/admin/dashboard，但需要额外给服务端配置重定向规则，把/admin下的所有页面请求都转发到index.html，否则刷新页面会报404。

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