404 页面未找到无法正常工作react-router v6（使用多个参数）

Question

我的浅薄理解导致了渲染 NotFound 页面的一个简单问题......

<Routes>
          <Route path="*" element={<NotFound />}/>
          <Route path="/" element={<Home />} />
          <Route path="/:category/:id" element={<Article />} />
        </Routes>

当uri包含一个“/”时，它会渲染匹配的组件或NotFound组件，但是，当uri包含两个“/”时，例如不存在的“/asoejdnxx/acnoiw”，它不会路由到NotFound 页面，但仅呈现一个没有错误的空白页面。

我假设问题是因为 React 正在寻找第三条路线中的参数（具有 :category 和 :id 参数），无论它是否匹配。

我确信不需要在“Article”组件中添加条件，例如如果参数与现有的 :id 不匹配，则渲染其他内容（因为这就是 path="*" 的目的） ，但我找不到重定向或渲染 NotFound 组件的方法。

Answer 1

是什么让您认为它"/asoejdnxx/acnoiw"不会匹配并path="/:category/:id"渲染“404”路由和NotFound组件？

对于 URL 路径，"/asoejdnxx/acnoiw"它将path="/:category/:id"匹配它并呈现Article组件。此时需要Article验证它正在使用的路由参数，如果它们无效，则重定向到 404 路由。

我建议实际上创建一个可以重定向到的 404 路由。

例子：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/:category/:id" element={<Article />} />
  <Route path="notfound" element={<NotFound />} />
  <Route path="*" element={<Navigate to="/notfound" replace />} />
</Routes>

在Article组件中使用钩子在正确的情况下useEffect重定向到。"/notfound"

例子：

const { category, id } = useParams();
const navigate = useNavigate();

...

useEffect(() => {
  if (/* invalid route params */) {
    navigate("/notfound", { replace: true });
  }
}, [category, id, navigate]);