404页面

config/config.js

@@ -41,13 +41,17 @@ export default defineConfig({
       ],
     },
     {
+      path: '/404',
+      component: './exception/404',
+    },
+    {
       path: '/',
       component: '../layouts/SecurityLayout',
       routes: [
         {
           path: '/',
           component: '../layouts/BasicLayout',
-          authority: ['admin', 'user'],
+          // authority: ['admin', 'user'],
           routes: [
             {
               path: '/',
@@ -59,12 +63,12 @@ export default defineConfig({
               icon: 'smile',
               component: './Welcome',
             },
-            {
-              name: 'list.table-list',
-              icon: 'table',
-              path: '/list',
-              component: './ListTableList',
-            },
+            // {
+            //   name: 'list.table-list',
+            //   icon: 'table',
+            //   path: '/list',
+            //   component: './ListTableList',
+            // },
             {
               path: '/system',
               name: 'system',
@@ -109,6 +113,10 @@ export default defineConfig({
                 },
               ],
             },
+            {
+              path: '*',
+              component: './exception/404',
+            },
           ],
         },
       ],

src/app.jsx

 export function patchRoutes({ routes }) {
-  // console.log(JSON.parse(localStorage.menuTree))
-  // console.log(routes)
+  // 添加不匹配路由跳转404页面
+  for (let i = 0; i < routes.length; i++) {
+    if (routes[i].path === '/') {
+      routes[i].routes[0].routes.forEach(item => {
+        if (item.routes && item.routes.length !== 0) {
+          item.routes.push(
+            {
+              path: '*',
+              exact: true,
+              // redirect: '/404',
+              component: require('@/pages/exception/404').default,
+            }
+          )
+        }
+      })
+    }
+  }
 }

src/layouts/BasicLayout.jsx

@@ -240,7 +240,10 @@ const BasicLayout = (props) => {
    * init variables
    */
 
+  console.log(props.children)
+
   return (
+
     <div className={`sage-app-wrapper ${collapsed ? 'hideSidebar' : ''}`}>
       <div className="sage-sidebar-container">
         <div className="sidebar-logo-container">

src/pages/exception/403/index.js

+import React from 'react'
+import { Link } from 'umi'
+import {Result, Button} from 'antd'
+
+export default () => (
+    <Result status='403' title='403' style={{background: 'none'}} subTitle='抱歉，你无权访问该页面。' extra={
+        <Link to="/">
+            <Button type="primary">返回首页</Button>
+        </Link>
+    }/>
+)

src/pages/exception/404/index.js

+import React from 'react'
+import { Link } from 'umi'
+import { Result, Button } from 'antd'
+
+export default () => (
+    <Result status="404" title="404" style={{background: 'none'}} subTitle='抱歉，你访问的页面不存在。' extra={
+        <Link to="/">
+            <Button type="primary">返回首页</Button>
+        </Link>
+    }
+    />
+)

src/pages/exception/500/index.js

+import React from 'react'
+import { Link } from 'umi'
+import {Result, Button} from 'antd'
+
+export default () => (
+    <Result status="500" title="500" style={{background: 'none'}} subTitle='抱歉，服务器出错了。' extra={
+        <Link to="/">
+            <Button type="primary">返回首页</Button>
+        </Link>
+    }
+    />
+)