React应用访问登录页及其他页面时URL自动添加#符号问题咨询

问题原因 #

该现象是React Router的HashRouter模式的默认特性，不属于代码异常。HashRouter通过URL的hash片段（即#后的内容）存储路由路径，不会向服务器发起新的页面请求，因此所有路由跳转都会自动在URL中追加#符号。

修复方案 #

方案1：替换为BrowserRouter（推荐） #

该方案可以彻底去除URL中的#，适合服务器支持单页应用路由配置的场景：

1. 修改路由导入逻辑，将原来的HashRouter替换为BrowserRouter：

import { BrowserRouter, Switch, Route } from 'react-router-dom'

2. 替换根路由组件标签：

return (
  <BrowserRouter>
    <React.Suspense fallback={loading()}>
      <Switch>
        {/* 原有路由规则无需修改 */}
        <CollaborateurRoute path="/cvtheque" name="CVTheque" render={props => <CVThequeIndex {...props} />} />
        {/* 其余路由保持不变 */}
        ...
      </Switch>
    </React.Suspense>
  </BrowserRouter>
)

3. 配置服务器路由回退规则，避免刷新页面出现404：

• Nginx部署场景，在站点配置中添加如下规则：

location / {
  try_files $uri $uri/ /index.html;
}

• 静态托管平台部署场景，按平台要求配置SPA路由回退规则，将所有路径请求重定向到根目录的index.html。

方案2：保留HashRouter调整配置（仅适配无服务器配置权限场景） #

如果无法调整服务器配置，必须使用HashRouter，可以修改hashType参数弱化#的显示效果，该方案兼容性较差，不推荐优先使用：

<HashRouter hashType="noslash">
  {/* 原有路由内容保持不变 */}
</HashRouter>

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