React Router v6匹配参数ID失效，路由匹配失败问题求助

我看了你的问题和代码结构，这个路由匹配错误的核心原因是路由配置里缺少了带动态参数的产品详情路由，同时需要确保链接和参数获取的逻辑正确。下面一步步帮你修复：

1. 修正App.js中的路由配置 #

打开App.js，你需要在<Routes>组件内添加一条匹配产品详情的动态路由，用:id来捕获产品ID参数：

import { Routes, Route } from "react-router-dom";
import FeaturedProduct from "./FeaturedProduct";
import Product from "./Product";

function App() {
  return (
    <div className="App">
      <Routes>
        {/* 主页路由 */}
        <Route path="/" element={<FeaturedProduct />} />
        {/* 添加产品详情动态路由 */}
        <Route path="/products/:id" element={<Product />} />
      </Routes>
    </div>
  );
}

export default App;

这里的:id是动态参数，React Router会把URL中/products/后面的部分作为id值传递给Product组件。

2. 确保FeaturedProduct中的链接正确 #

在FeaturedProduct.js里，你给每个产品的跳转链接应该指向/products/${product.id}，确认你的Link组件是这样写的：

import { Link } from "react-router-dom";

// 渲染产品列表时的链接
<Link to={`/products/${product.id}`}>
  {/* 产品内容 */}
</Link>

如果之前的路径写错（比如少了s或者路径层级不对），也会导致路由不匹配。

3. 在Product组件中正确获取并使用ID参数 #

打开Product.js，使用React Router提供的useParams钩子来获取URL中的id参数，然后调用API获取对应产品：

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

function Product() {
  const { id } = useParams(); // 获取URL中的id参数
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`https://fakestoreapi.com/products/${id}`)
      .then(res => res.json())
      .then(data => {
        setProduct(data);
        setLoading(false);
      })
      .catch(err => console.error(err));
  }, [id]); // 依赖id，当id变化时重新请求

  if (loading) return <div>Loading...</div>;
  if (!product) return <div>Product not found</div>;

  return (
    <div>
      <h1>{product.title}</h1>
      <img src={product.image} alt={product.title} style={{ width: "200px" }} />
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
    </div>
  );
}

export default Product;

这样就能根据URL中的ID获取对应产品并渲染了。

完成这三步后，你点击产品链接或者手动输入localhost:8888/products/1这样的URL，就能正确打开产品详情页面了。

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