React带:id参数路由页面刷新时style.css加载失败问题

刷新带:id参数的嵌套路由页面（如/games/edit/1）时style.css加载失败，返回React应用默认提示文本，核心原因有两点：

1. CSS引入路径错误：若index.html中用相对路径引入style.css，嵌套路由下浏览器会从当前路由路径（如/games/edit/）发起请求，导致服务器找不到该路径下的CSS文件，最终返回index.html的内容。
2. 服务器未配置SPA fallback：React Router是客户端路由，刷新时浏览器直接向服务器请求当前路由路径，若服务器未配置将所有路由请求转发到index.html，会返回错误内容或直接返回index.html，导致CSS请求拿到的是页面文本而非样式文件。

1. 修正CSS引入路径 #

打开public/index.html，将style.css的相对路径改为根绝对路径：

<!-- 错误写法 -->
<link rel="stylesheet" href="./style.css">

<!-- 正确写法 -->
<link rel="stylesheet" href="/style.css">

修改后，无论当前路由处于哪一层，浏览器都会从域名根目录请求style.css，避免路径错误。

2. 配置服务器SPA fallback #

根据你使用的服务器类型，添加对应配置，确保所有路由请求都返回index.html：

使用Create React App开发服务器（npm start） #

开发服务器默认已配置fallback，无需额外操作；生产构建后部署需按以下方式配置。

生产部署用serve工具 #

安装serve后，启动时添加-s参数启用SPA模式：

serve -s build

Nginx服务器配置 #

在Nginx的server块中添加try_files指令：

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

该配置会让Nginx优先尝试请求静态文件，找不到则返回index.html。

Express服务器配置 #

添加中间件将所有路由请求转发到index.html：

const express = require('express');
const path = require('path');
const app = express();

// 托管静态文件
app.use(express.static(path.join(__dirname, 'build')));

// 所有路由请求返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000);

修改后重新构建（生产环境）或重启开发服务器，刷新带参数的页面，查看Network标签中style.css的请求路径是否正确，响应内容是否为CSS文件而非页面文本。

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