RTK Query调用指定查询却触发其他查询导致404错误求助

根本原因：路由规则冲突 #

你的App.js中定义了两个结构完全相同的路由：

• /anime/:category（对应AnimeCategoryPage组件）
• /anime/:genre（对应GenrePage组件）

React Router 会按照路由定义的顺序进行匹配，当你访问类似/anime/Vampire的URL时，会优先匹配第一个路由规则，导致AnimeCategoryPage被渲染，而不是预期的GenrePage。而AnimeCategoryPage大概率调用了animeApi.js中的useGetCategoryOfAnimeQuery，传入Vampire作为参数，从而触发了错误的API请求：https://kitsu.io/api/edge/Vampire/anime?limit=20。

解决方案 #

1. 修改路由规则，消除冲突

调整路由路径，让两个路由的匹配模式区分开，例如：

// App.js
<Routes>
  <Route path="/" element={<Homepage />} />
  <Route path="/anime/category/:category" element={<AnimeCategoryPage />} />
  <Route path="/anime/genre/:genre" element={<GenrePage />} />
</Routes>

之后访问分类页面用/anime/category/xxx，访问类型页面用/anime/genre/xxx，即可避免路由匹配冲突。

或者，将类型页面的路径独立出来：

<Routes>
  <Route path="/" element={<Homepage />} />
  <Route path="/anime/:category" element={<AnimeCategoryPage />} />
  <Route path="/genre/:genre" element={<GenrePage />} />
</Routes>

2. 优化GenrePage中的useEffect逻辑

当前代码中，当thisCategory初始为undefined时（API请求未完成前），会向Redux派发undefined值，建议添加判断：

// GenrePage.js
useEffect(() => {
  if (thisCategory) {
    dispatch(addThisCategory(thisCategory));
  }
}, [thisCategory]);

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