React Router跳转无报错但Product_Detail组件数据不渲染问题求解

问题原因 #

• 路由路径不匹配：App.js中配置的详情页路由为/todos/:id，但All_Products组件中跳转的路径为/products/${id}，两者完全不一致。你能正常进入页面是因为Switch内部包裹了div，导致Switch的精准匹配规则失效，所有路径都会渲染Switch内的div内容，此时useParams无法拿到正确的id参数。
• 详情页接口请求地址错误：Product_Details组件中请求单个商品的URL缺少斜杠，写为products${id}，实际应该为products/${id}，错误的请求地址会返回404或空数据，且你没有添加错误捕获逻辑，所以没有报错提示。
• 状态初始值不合理：differentProduct的初始值为空数组[]，JS中空数组为真值，页面初始渲染时就会读取differentProduct.name，而数组不存在name属性，自然不会渲染内容。

修复方案 #

1. 修正路由配置，将App.js中详情页的路由路径改为和跳转路径一致，同时移除Switch内部的div，保证Switch匹配规则正常生效：

// App.js 修正后代码
import './App.css';
import {Header} from "./Components/Header";
import {All_Products} from "./Components/All_Products";
import {Product_Details} from "./Components/Product_Details";
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";

function App() {
  return <Router>
    <Header/>
    <Switch>
      <Route path="/" exact>
          <All_Products/>
      </Route>
      <Route path="/products/:id">
          <Product_Details/>
      </Route>
    </Switch>
  </Router>;
}
export default App;

2. 修正详情页接口请求地址、状态初始值，补充错误捕获逻辑方便后续排查：

// Product_Detail.js 修正后代码
import React, {useEffect} from "react";
import {useParams} from "react-router-dom";

export let Product_Details = () => {
  // 初始值改为null，避免初始渲染读取不存在的属性
  let [differentProduct, setDifferentProduct] = React.useState(null);

  let {id} = useParams();

  let fetch_Different_Product = async () => {
    try {
      // 接口地址补充斜杠
      let response = await fetch(`https://613c5527270b96001798b0af.mockapi.io/api/v1/products/${id}`);
      if (!response.ok) throw new Error(`请求失败，状态码：${response.status}`)
      let json = await response.json();
      setDifferentProduct(json)
      console.log(json)
    } catch (e) {
      console.error('获取商品详情失败：', e)
    }
  }

  useEffect(() => {
    fetch_Different_Product();
  },[id])


  return (<div>
      {differentProduct && (<div>{differentProduct.name} <img src={differentProduct.imageUrl} alt={differentProduct.name}/></div>)}
  </div>)
}

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