create-react-app动态路由页面刷新后CSS、JS资源无法加载问题求助

你遇到的是单页应用动态路由场景下的典型相对路径资源加载错误：public/index.html中引用静态资源时使用了无开头斜杠的相对路径（例如href="css/xxx.css"），当你在/document/[id]这类二级及以上路径刷新页面时，浏览器会将相对路径的根解析为当前路由的父级路径/document/，会去请求/document/css/xxx.css这类不存在的资源，自然加载失败。

步骤1：修正静态资源引用路径 #

将public/index.html中所有外部CSS、JS、字体的引入路径全部调整为根路径绝对路径，也就是在路径开头加/：

• 原来的写法示例：

  <link rel="stylesheet" href="css/common.css">
  <script src="js/utils.js"></script>
  

• 修改后的写法：

  <link rel="stylesheet" href="/css/common.css">
  <script src="/js/utils.js"></script>
  

调整后浏览器会始终从站点根目录查找资源，不受当前页面路由层级影响。

步骤2：配置单页应用路由回退规则（针对BrowserRouter模式） #

如果你使用的是React Router的BrowserRouter模式，还需要配置部署服务器的回退规则，保证所有路由请求都返回index.html，否则动态路由刷新会直接返回404：

Nginx 部署配置 #

在站点的nginx配置块中添加如下规则：

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

Apache 部署配置 #

在项目public目录下新建.htaccess文件，写入如下内容：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

其他平台部署 #

如果部署到Netlify、Vercel等平台，按照平台要求配置单页应用回退规则即可，例如Netlify可在public目录新建_redirects文件，写入/* /index.html 200。

特殊场景适配 #

如果你的项目部署在域名的子目录下（例如https://your-domain.com/sub-app/），需要先在package.json中添加配置：

"homepage": "/sub-app/"

再将所有静态资源的引用路径前缀改为/sub-app/即可。

内容的提问来源于stack exchange，提问作者Paul Nuñez