React中No routes matched location "/ProductList/1"警告问题排查

核心错误：路由未配置参数匹配 #

你收到的No routes matched location "/ProductList/1"警告，本质是App.js里的ProductList路由未定义带参数的路径规则。当前路由仅匹配/ProductList，但点击链接后跳转的是带分类ID的/ProductList/1，导致路由无法匹配。

修复步骤1：修改App.js路由配置 #

将ProductList路由改为带参数的形式，用:categoryId捕获URL中的ID：

// App.js
<Routes>
    {/* 其余路由保持不变 */}
    <Route path="/ProductList/:categoryId" element={<ProductList />} /> {/* 修改此处 */}
    <Route path="/CategoryList" element={<CategoryList />} />
</Routes>

其他潜在问题与修复 #

除路由外，代码中还有多处细节会导致功能异常：

1. useParams的正确使用 #

useParams()返回的是对象，需解构出具体参数，不能直接使用整个对象：

// ProductList.js
const { categoryId } = useParams(); // 解构获取categoryId
console.log("id-->", categoryId)
const url = `http://localhost:64082/api/products/getproductbycategoryid/${categoryId}`

2. 初始状态类型错误 #

你将products初始化为对象{}，但后续要调用数组方法map，会触发报错，应初始化为数组[]：

// ProductList.js
const [products, SetProducts] = useState([]); // 改为数组类型

3. useEffect依赖项缺失 #

当前useEffect依赖数组为空，分类ID变化时不会重新请求数据，需将categoryId加入依赖：

// ProductList.js
useEffect(() => {
  fetchData()
}, [categoryId]) // 添加categoryId作为依赖

4. CategoryList中的拼写错误 #

渲染分类名称和描述时属性名拼写错误，会导致内容显示undefined，需修正：

// CategoryList.js
<h5 className="card-title">{category.categoryName}</h5> {/* 修正cotegoryName为categoryName */}
<p className="card-text">{truncateOverview(category.categoryDescription, 50)}</p> {/* 修正cotegoryDescription为categoryDescription */}

5. 移除无用的Router导入 #

CategoryList中导入了Router但未使用，可直接删除：

// CategoryList.js
import { Link } from "react-router-dom"; // 仅保留Link

修复后验证 #

完成上述修改后，点击分类链接会正确匹配/ProductList/1路由，ProductList组件将获取对应分类ID，调用API拉取数据并渲染表格。

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