404页没有发现不起作用的反应v6（使用一个以上的参数）

发布于 2025-02-11 08:24:09 字数 556 浏览 0 评论 0原文

我的理解是在呈现“不合格”页面的情况下引起了一个简单的问题...

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

当URI包含一个“/”时，它会呈现匹配的组件或NOTFOUND组件，但是，当URI包含两个“/”，例如“/asoejdnxx”时/acnoiw“不存在的，它不会路由到“未发现”页面，而只是呈现一个没有错误的空白页。

我假设问题是因为React正在寻找第三路线中的参数（具有：类别和：ID参数），无论是否匹配。

我敢肯定，应该在“文章”组件中添加条件，例如参数与现有的：ID，呈现其他内容（因为那是路径的目的=“*”），但我找不到一种重定向或渲染不合格组件的方法。

原文

My shallow understanding is causing a simple issue with rendering the NotFound page...

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

When the uri contains one "/", it renders the matching component or NotFound component, however, when the uri includes two "/", for example "/asoejdnxx/acnoiw" which doesn't exist, it doesn't route to the NotFound page but just renders a blank page with no errors.

I'm assuming the issue is because react is looking for the params in the thirds Route(which has the :category and :id param) regardless of it matching or not.

I'm sure there should be no need to add a condition in the "Article" component, such as if the param doesn't match to an existing :id, render something else(since thats the purpose of path="*"), but i cant find a way to redirect or render the NotFound component.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

李白 2025-02-18 08:24:09

是什么让您认为“/asoejdnxx/acnoiw”将不匹配path =“/：category/：ID”“ 404”路由和<代码> NOTUND 组件？

对于URL路径“/asoejdnxx/acnoiw” path =“/：category/：category/：category/：ID”将匹配并渲染Artist component。在这一点上，文章需要验证其消耗的路由参数，如果它们无效，请重定向到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>

在文章中，组件使用使用在正确的情况下将挂钩重定向到“/notfound”。

例子：

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

...

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

What makes you think that "/asoejdnxx/acnoiw" wouldn't be matched by path="/:category/:id" and render the "404" route and NotFound component instead?

For URL path "/asoejdnxx/acnoiw" the path="/:category/:id" will match it and render the Article component. It's at this point that Article needs to validate the route params it's consuming and if they are invalid, redirect to the 404 route.

I suggest actually creating a 404 route that you can redirect to.

Example:

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

In the Article component use a useEffect hook to redirect to "/notfound" under the correct circumstances.

Example:

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

...

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

回复收藏 0 原文

清晨说晚安 2025-02-18 08:24:09

您可以手动将用户重定向到404页：

import { useNavigate } from "react-router-dom";
const YourComponent = () => {
    const navigate = useNavigate();
    if(/*some condition*/){
        navigate("/404");
    }
    return /*...*/
}```

You can manually redirect the user to the 404 page:

import { useNavigate } from "react-router-dom";
const YourComponent = () => {
    const navigate = useNavigate();
    if(/*some condition*/){
        navigate("/404");
    }
    return /*...*/
}```

回复收藏 0 原文

~没有更多了~