React路由刷新404问题：为何修改路径格式可解决？

核心问题：BrowserRouter的History模式特性 + 静态资源路径配置 #

• 通过AppLayout按钮跳转/events/add时，是React客户端路由接管页面切换，不会向服务器发送新请求，所有资源（包括main.js）早已从根路径加载完成，因此能正常显示。
• 刷新/events/add页面时，浏览器会直接向服务器发送GET /events/add请求：
  1. 若服务器未配置SPA（单页应用） fallback规则，找不到对应/events/add的路由，会直接返回404页面；
  2. 同时，如果index.html中静态资源（比如main.js）用的是相对路径（例如./main.js），浏览器会从当前路径/events/add下去请求/events/main.js，而服务器的/events/目录下根本没有这个文件，因此出现「找不到main.js」的错误。

为什么/events-add刷新正常？ #

当路径改为/events-add后，刷新时浏览器请求GET /events-add：

• 你的服务器大概率配置了SPA fallback（比如Create React App默认的serve命令、nginx的try_files规则），会把所有无法匹配的请求重定向到/index.html；
• 此时浏览器加载到正确的index.html，若静态资源用的是绝对路径（比如/main.js），会直接从根路径请求到正确文件，React路由也能正常接管并渲染AddEvent组件。

可选修复方向 #

• 给服务器配置SPA fallback：让所有非静态资源的请求都返回index.html；
• 将index.html中静态资源的引用改为绝对路径（比如用/main.js代替./main.js），或在项目配置中设置publicUrl为根路径。

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