react 404 Page

最新推荐文章于 2024-03-14 10:38:50 发布

幸福了，然后呢

最新推荐文章于 2024-03-14 10:38:50 发布

阅读量508

点赞数

分类专栏： React Router 文章标签： react

本文链接：https://blog.csdn.net/weixin_42260975/article/details/104963482

版权

本文介绍了如何在react应用中利用react-router实现404 Not Found页面。通过在<Switch>组件中放置一个通配符路径的<Route>作为最后的捕获，可以有效地处理未定义的路由，同时提到了<Redirect>组件用于URL重定向。

摘要由CSDN通过智能技术生成

react-router之404 Page

本文内容整理参考借鉴以下文章：
https://www.jianshu.com/p/6583b7258e78
https://reacttraining.com/react-router/web/api/BrowserRouter

在此以表感谢！

–你可以使用< Switch>中的最后一个<Route>作为一种“回退”路由来捕获404个错误。
–关于这个例子，有一些有用的东西值得注意:

< Switch>渲染匹配第一个子<Route>

<Redirect>可用于将旧URL重定向到新URL

<Route path=" * ">始终匹配

import React from "react";
import {
   
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect,
  useLocation
} from "react-router-dom";

// There are a few useful things to note about this example:
//
// - A <Switch> renders the first child <Route> that matches
// - A <Redirect> may be used to redirect old URLs to new ones
// - A <Route path="*> always matches

export default function NoMatchExample() {
   
  return (