React单页应用已删除商品URL如何实现301状态码重定向到列表页

现有方案失效的核心问题如下：

• 拼写错误：setupProxy.js中定义的过滤函数变量名为filter，但传给createProxyMiddleware的第一个参数写为myfilter，变量名不匹配直接导致代理规则完全不触发。
• 环境适配问题：setupProxy.js仅在React开发环境生效，项目打包部署到生产环境后该配置不会生效，生产环境没有本地代理服务，方案天生无法适配线上场景。
• 逻辑循环问题：你用window.location.href跳转到带参数的/products页，就算代理生效，Node服务返回301重定向到不带参数的/products页，浏览器再次请求/products会走到Node服务的else逻辑，再次触发301重定向，直接形成无限重定向循环。
• 301状态码本质限制：301是HTTP响应状态码，必须由服务器在返回资源时附带，纯客户端JS运行时，浏览器已经收到了服务器返回的200状态码，此时无论前端怎么跳转，都无法修改已经返回的状态码，不可能纯前端实现301重定向。

方案1：服务端路由统一处理（推荐，符合301使用规范） #

不需要在React前端做任何跳转逻辑，直接在服务端（Nginx或你的Node服务）配置规则即可：

1. 所有/prod-detail/[商品id]的请求，先查询该商品是否已下架
2. 已下架的商品直接在服务端返回301，响应头Location设为/products即可，完全不需要前端参与

如果用Nginx部署React应用，可以直接在Nginx配置重定向规则，性能更高，示例配置：

# 下架商品逐个配置
location ~ ^/prod-detail/123$ {
    return 301 /products;
}
# 批量匹配所有商品详情请求转发到Node服务判断状态
location ~ ^/prod-detail/(\d+)$ {
    proxy_pass http://localhost:8000/check_product?id=$1;
}

如果继续使用现有Node服务，直接把所有商品详情页的请求先转发到Node服务判断，下架就返回301，正常状态就返回React应用的入口HTML即可。

方案2：开发环境临时适配方案（仅本地调试用） #

修复现有代码错误即可在开发环境临时跑通：

1. 修复setupProxy.js的变量名错误，把createProxyMiddleware(myfilter改为createProxyMiddleware(filter
2. 删掉Node服务里的else分支逻辑，改为正常返回React应用的入口文件，避免无限重定向
3. 该方案仅可用于本地调试，生产环境必须走服务端配置

如果完全无法修改服务端配置，只能前端处理的话，只能实现用户跳转效果，无法返回301状态码，对SEO无任何帮助，仅优化用户体验：
在商品详情组件内判断商品不存在时，直接用React路由的替换跳转即可，不需要加参数也不需要代理：

import { useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';

function ProductDetail() {
  const navigate = useNavigate();
  const [productNotFound, setProductNotFound] = useState(false);
  
  useEffect(() => {
    if (productNotFound) {
      // 用replace跳转不会在浏览器历史记录里留存无效商品页记录
      navigate('/products', { replace: true });
    }
  }, [productNotFound, navigate]);

  // 组件其余逻辑
}

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