React Router v6未匹配路由的404页面配置问题求助

你的代码里path='*'未生效，核心原因是:category参数路由拦截了请求——React Router v6中，参数路由（如:category）会匹配任意单个路径段（比如/abc、/test这类单层级路径），所以这类你认为“未定义”的路由会被Products组件接管，而不会走到path='*'的路由。

解决方案1：在参数路由组件内校验合法性 #

如果希望非预期的分类路径也跳转到404页面，可以在Products组件中校验category参数是否合法，不合法则导航到404：

import { useParams, Navigate } from 'react-router-dom';

const Products = () => {
  const { category } = useParams();
  // 替换为你实际的合法分类列表
  const validCategories = ['electronics', 'clothing', 'books'];

  // 校验分类合法性，不合法则跳转404
  if (!validCategories.includes(category)) {
    return <Navigate to="/404" replace />;
  }

  // 合法分类的正常渲染逻辑
  return <div>展示{category}分类下的商品</div>;
};

解决方案2：调整路由匹配规则（如果不需要单段参数路由） #

如果你的:category路由只需要匹配特定前缀的路径（比如/category/:id），可以修改路由路径为更精确的格式，避免拦截所有单段路径：

<Routes>
  <Route path="/404" element={<NotFound />} />
  <Route path="/" element={<Home />} />
  {/* 修改为更精确的路径，避免拦截任意单段路由 */}
  <Route path="/category/:categoryId" element={<Products />} />
  {/* 确保这个路由是最后一个，匹配所有未被前面路由命中的路径 */}
  <Route path='*' element={<NotFound />} />
</Routes>

额外检查项 #

• 确认你的React Router版本确实是v6（可以通过npm list react-router-dom查看），v5及以下的通配符路由写法逻辑不同。
• 确保path='*'是<Routes>组件中的最后一个路由，React Router会按顺序匹配路由，前面的路由优先级更高。

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