移除HashRouter中的#符号：React Router-Dom路由问题咨询

为什么会出现带#的URL和自动重定向？ #

这其实是HashRouter的核心工作机制导致的：

• HashRouter的本质：它靠URL的hash片段（也就是#后面的部分）来管理路由状态。因为hash部分不会被发送到服务器，对于GitHub Pages这种静态托管平台来说，不需要服务器额外配置就能正常跑起来，但代价就是URL里必然会带有#符号。
• 自动重定向的原因：当你访问不带#的地址时，HashRouter初始化时会检测当前路径不符合它的hash路由规则，就会自动跳转到默认的hash路由入口（也就是/#/），这是它内置的兜底行为。

如何去掉URL中的#符号？ #

要去掉#，我们得改用BrowserRouter，但因为GitHub Pages是静态托管，直接用BrowserRouter会遇到刷新页面404的问题，需要按以下步骤配置：

1. 替换路由组件
   把你的Router.jsx里的HashRouter替换成BrowserRouter，别忘了加上basename属性（值是你的仓库名称，确保路由路径正确）：

   import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
   
   function AppRouter() {
     return (
       <Router basename="/your-repo-name">
         <Routes>
           {/* 你的路由配置内容 */}
         </Routes>
       </Router>
     );
   }
   

2. 创建404.html文件
   在项目的public目录下新建一个404.html，内容完全复制index.html的内容。这一步是关键：当用户刷新GitHub Pages上的路由页面时，服务器找不到对应的静态文件，此时会返回这个404.html，React Router就能接管页面并渲染正确的路由内容。

3. 配置package.json的homepage字段
   在package.json中添加homepage字段，值为你的GitHub Pages访问地址：

   "homepage": "https://your-github-username.github.io/your-repo-name/"
   

   如果用的是自定义域名，直接填你的域名地址即可。

4. 部署到GitHub Pages
   推荐用gh-pages包简化部署流程：

   • 先安装依赖：npm install gh-pages --save-dev
   • 在package.json的scripts里添加：

     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
     

   • 最后运行npm run deploy，就能把build后的内容推送到GitHub Pages了。

注意事项 #

• 本地开发时，BrowserRouter可以正常工作，不需要额外配置；
• basename的仓库名称必须和homepage里的保持一致，否则路由会跳转出错；
• 如果是组织账户下的仓库，homepage的格式要对应调整。

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