回顾
接上篇，上次我们在前端项目中，补全了token校验，但是说实话目前还是有一些其他问题。我们逐一解决，如：我们如果访问其他没有注册的routes，这时候页面显示是白屏，这肯定是不符合我们开发的效果的，因此，本篇文章我们要解决的，就是把其他不定义的routes，默认走向我们配置好的404页面
为什么要有404？
在前端开发中，为什么需要有404页面呢？这主要涉及到用户体验和错误处理的方面。以下是一些原因：
-
用户体验：404页面用于告知用户当前请求的页面不存在或无法访问。如果用户在网站上输入了错误的URL或点击了一个无效的链接，服务器将返回404错误码，并显示404页面。这样，用户可以明确知道页面不存在，并且可以返回到其他可用页面，而不是看到一个空白的或者错误的页面。
-
错误处理：在前端应用中，有时可能会出现路由错误或其他异常，导致某些页面无法正确加载。为了防止用户因此而感到困惑或不满，通过显示404页面，可以让用户知道出现了问题，并提供一种友好的方式来应对错误情况。
-
优化SEO：搜索引擎会索引网站的内容，包括404页面。通过为404页面提供合适的内容和导航链接，可以改善网站的SEO，使搜索引擎更好地理解和索引你的网站。
-
统一风格：在一个完善的前端应用中，404页面是站点的一部分，而不是一个默认的错误页面。通过为404页面设计和提供自定义内容，可以确保整个站点在外观和风格上保持一致性。
-
分析用户行为：通过监测404页面的访问情况，你可以了解到用户经常访问哪些不存在的页面或无效链接，从而进一步优化你的网站或修复潜在的问题。
综上所述，404页面在前端开发中是一个重要的组成部分，它可以提供良好的用户体验，优化SEO，帮助用户处理错误情况，并为整个站点提供统一的风格。因此，在开发前端页面时，为404页面进行合适的设计和实现是值得考虑的。
编码
- 新建
abandon-web/src/pages/404.tsx文件
import { history } from '@umijs/max';
// @ts-ignore
import { Button, Result } from 'antd';
import React from 'react';
const NoFoundPage: React.FC = () => (
<Result
status="404"
title="404"
subTitle="Sorry, the page you visited does not exist."
extra={
<Button type="primary" onClick={() => history.push('/')}>
Back Home
</Button>
}
/>
);
export default NoFoundPage;
- 添加routes
// {
// path: '/welcome',
// component: 'IndexPage',
// name: '欢迎', // 兼容此写法
// icon: 'testicon',
// // 更多功能查看
// // https://beta-pro.ant.design/docs/advanced-menu
// // ---
// // 新页面打开
// target: '_blank',
// // 不展示顶栏
// headerRender: false,
// // 不展示页脚
// footerRender: false,
// // 不展示菜单
// menuRender: false,
// // 不展示菜单顶栏
// menuHeaderRender: false,
// // 权限配置，需要与 plugin-access 插件配合使用
// access: 'canRead',
// // 隐藏子菜单
// hideChildrenInMenu: true,
// // 隐藏自己和子菜单
// hideInMenu: true,
// // 在面包屑中隐藏
// hideInBreadcrumb: true,
// // 子项往上提，仍旧展示,
// flatMenu: true,
// },
export default [
{
name: '首页',
path: '/home',
component: './Home',
},
{
name: '权限演示',
path: '/access',
component: './Access',
},
{
name: 'CRUD 示例',
path: '/table',
component: './Table',
},
{path: '/login', layout: false, component: './Login'},
{
path: '/',
redirect: '/home',
},
{path: '*', component: './404', exact: false}, // 将通配符路由放在最后，配置 404 页面组件，exact: false 表示匹配所有未定义的路由
];
了解UMI路由匹配规则
在 Umi 中，路由的匹配是按照配置文件中路由的顺序进行的，一旦找到匹配的路由，就会停止匹配，不再继续向下查找。
如果将通配符路由放在前面，它会先匹配所有的路由，包括其他具体定义的路由。这样，其他具体路由将永远不会被匹配到，因为通配符路由会“吞噬”所有路径，导致其他路由无法生效，相当于所有路径都会重定向到通配符路由所指定的组件。
而将通配符路由放在最后，它会在其他路由都不匹配时才被匹配到。这样，其他具体路由都有机会先被匹配，只有当用户访问了不存在的路径时，才会匹配到通配符路由，从而展示 404 页面。
验证
如图所示，在链接中访问不存在的routes，展示404页面即成功！点击Back Home按钮，则会被重定向到/home页面。
