React Router打包后无法正常工作？本地正常部署后路由失效如何解决

问题原因 #

你使用的是BrowserRouter，它依赖HTML5的History API实现无刷新路由。本地开发环境下webpack devServer默认配置了fallback到index.html的规则，无论访问什么路径都能返回项目入口文件，路由逻辑可以正常运行。但生产部署时，服务器没有对应配置的话，用户直接访问/login、/dashboard这类子路由时，服务器会尝试查找路径对应的静态文件，找不到就会返回404，路由自然无法正常工作。

可用解决方案 #

• 方案1：配置服务器路由重定向规则
  让所有请求都fallback到项目的index.html入口文件即可，不同服务器配置方式不同：
  • Nginx配置：在对应站点的server块中添加try_files $uri $uri/ /index.html;
  • Apache配置：在站点根目录的.htaccess文件中添加重写规则，将所有请求转发到index.html
  • 静态托管平台：Vercel、Netlify、各云厂商对象存储托管服务都有路由重定向配置入口，指定所有路径重定向到/index.html，返回状态码设为200即可
• 方案2：替换为HashRouter
  把index.js中的BrowserRouter替换为HashRouter，路由会带#前缀，所有路由逻辑都在#后的hash段处理，服务器只需要读取根路径的index.html，不需要额外配置。缺点是URL中会多一个#标识，美观度略低。
  修改后index.js参考代码：

  import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App'
  //import * as serviceWorker from './serviceWorker';
  import { HashRouter } from "react-router-dom";
  
  ReactDOM.render(
    <React.StrictMode>
      <HashRouter>
          <App />
      </HashRouter>
    </React.StrictMode >
    ,
    document.getElementById('root')
  );
  

• 方案3：子目录部署额外配置
  如果你的项目没有部署在服务器根目录，比如部署在/myapp/路径下，需要给BrowserRouter添加basename参数：<BrowserRouter basename="/myapp">，同时打包配置里的publicPath也要同步修改为/myapp/。

如果部署后首先出现白屏、静态资源加载404的问题，先检查打包配置中的publicPath是否和你实际部署的路径匹配。

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