React+Express电商项目cart路由访问报404错误排查

两个配置错误共同导致404：

• React Router 路由匹配顺序错误，通配路由提前拦截了购物车路径
• Axios 接口请求使用无前置斜杠的相对路径，在非根路径下会拼接出错误的请求地址

1. 调整路由顺序，精确路径优先 #

Switch 组件按从上到下的顺序匹配路由，匹配到第一个符合规则的条目就会停止后续匹配。你当前把通配的商品详情路由/:id放在了购物车路由前面，且没有加exact精确匹配，所有/cart开头的路径都会被这个路由提前拦截，把cart识别为商品ID，错误渲染商品详情组件、触发商品详情接口请求。
把更精确的固定路径放在前面，通配路径放在最后，修改App.js代码如下：

function App() {
  return (
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route exact path="/products" component={ProductPage}/ >
      {/* 购物车路由前移，优先匹配 */}
      <Route exact path="/cart" component={CartPage} />
      <Route path="/cart/:id" component={CartPage} />
      {/* 通配商品详情路由放最后，避免提前拦截 */}
      <Route path="/:id" component={ProductDetail} />
    </Switch>
  )
}

export default App;

2. 修正Axios请求路径为根路径相对地址 #

你当前所有Axios请求写的是不带开头/的相对路径，浏览器会基于当前页面的URL层级拼接请求地址：

• 访问根路径/时，请求api/products会被拼接为http://localhost:3000/api/products，能正常走代理到5000端口
• 访问/cart时，同路径会被拼接为http://localhost:3000/api/products/cart
• 访问/cart/223时，同路径会被拼接为http://localhost:3000/cart/api/products/cart
  这也是你看到不同路径下报错请求地址不一样的原因。
  给所有请求路径加上前导斜杠，强制从站点根目录拼接地址，修改productActions.js代码如下：

const listProducts = () => async (dispatch) => {
  try {
    dispatch({ type: PRODUCT_LIST_REQUEST });
    // 路径前加/
    const { data } = await axios.get("/api/products");
    dispatch({ type: PRODUCT_LIST_SUCCESS, payload: data });
 } catch (error) {
   dispatch({ type: PRODUCT_LIST_FAIL, payload: error.message });
  }
 };

const detailsProduct = (productId) => async (dispatch) => {
  try {
   dispatch({ type: PRODUCT_DETAILS_REQUEST, payload: productId });
   // 路径前加/
   const { data } = await axios.get(`/api/products/${productId}`);
   dispatch({ type: PRODUCT_DETAILS_SUCCESS, payload: data });
   } catch (error) {
   dispatch({ type: PRODUCT_DETAILS_FAIL, payload: error.message });
    }
  };

export { listProducts, detailsProduct };

3. 检查购物车逻辑的接口配置 #

从报错信息看，addToCart方法里也发起了接口请求，同样把请求路径改为带前导斜杠的绝对路径即可。另外注意你当前server.js里只定义了/api/products和/api/products/:id两个接口，如果购物车逻辑需要请求/api/products/cart或其他购物车相关接口，需要在Express服务中补充对应接口逻辑，否则接口会返回404。

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