React中useLocation()钩子异常：刷新详情页请求styles.css问题

问题根源 #

刷新页面后，浏览器会重新请求页面静态资源（如styles.css），如果你的静态资源使用相对路径引入（比如<link href="styles.css">），当当前URL是/products/xxx时，浏览器会把相对路径解析为/products/styles.css，这个请求恰好命中了后端的/products/:id动态路由，导致后端拿到的id变成了styles.css而非商品ID。同时前端axios请求的路径解析逻辑也存在同样问题。

具体修复步骤 #

1. 修正静态资源引用路径 #

将所有静态资源的引用改为绝对路径（添加根路径前缀/），确保浏览器始终从网站根目录请求资源：

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

脚本、图片等其他静态资源同理，全部使用带/的绝对路径。

2. 修复前端axios请求逻辑 #

改用useParams()获取商品ID，并给请求URL添加明确的API前缀（或完整后端地址），避免相对路径解析错误：

import { useParams } from 'react-router-dom';
import axios from 'axios';

function ProductDetails() {
  const { id } = useParams();
  const [product, setProduct] = useState({});

  useEffect(() => {
    // 给请求URL添加API前缀（比如/api），或直接使用后端完整地址
    axios
      .get(`/api/products/${id}`)
      .then((response) => {
        if (response.status === 200) {
          setProduct(response.data);
          setDate(response.data.bidEnd);
        } else console.log(response);
      })
      .catch((err) => console.log(err));
  }, [id]); // 添加id作为依赖，确保路由变化时重新请求

  // 返回HTML代码
}

3. 后端路由顺序调整（Express环境） #

确保后端先处理静态资源请求，再处理API路由，最后添加SPA路由 fallback（保证刷新时返回前端入口文件）：

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

// 1. 先托管前端静态资源（比如打包后的build目录）
app.use(express.static(path.join(__dirname, 'client/build')));

// 2. 再定义API路由
app.route("/api/products/:id").get((req, res) => {
  console.log(req.params);
  const id = req.params.id;

  Product.findOne({ _id: id })
    .populate("seller")
    .then((response) => res.status(200).send(response))
    .catch((err) => console.log(err));
});

// 3. 最后添加SPA路由 fallback，刷新任何路由都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/build/index.html'));
});

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