feat(locales): ✨ [locales] 监听路由报错

src/locales/en_US/modules/layout.ts

@@ -12,4 +12,5 @@ export default {
   'layout.error.403': 'Sorry, you are not authorized to access this page.',
   'layout.error.404': 'Sorry, the page you visited does not exist.',
   'layout.error.500': 'Sorry, something went wrong.',
+  'layout.error.element.content': 'The content you page has the following error:',
 };

src/locales/zh_CN/modules/layout.ts

@@ -12,4 +12,5 @@ export default {
   'layout.error.403': '抱歉，您无权访问此页面。',
   'layout.error.404': '抱歉，您访问的页面不存在。',
   'layout.error.500': '抱歉，出了问题。',
+  'layout.error.element.content': '页面内容有以下错误:',
 };

src/router/index.tsx

@@ -4,6 +4,8 @@ import { createBrowserRouter } from 'react-router-dom';
 import Layout from '@/layout';
 import Authority from '@/layout/Authority';
 const ErrorPage403 = lazy(() => import('@/views/core/error/403'));
+const ErrorElement = lazy(() => import('@/views/core/error/ErrorElement'));
+
 const Login = lazy(() => import('@/views/Login'));
 
 export const errorPage = [
@@ -21,7 +23,7 @@ export const baseRouter: RouteObject[] = [
         <Layout />
       </Authority>
     ),
-    errorElement: <ErrorPage403 />,
+    errorElement: <ErrorElement pageType="Layout" />,
     children: [...errorPage],
   },
   {

src/router/utils.tsx

@@ -1,13 +1,15 @@
 import type { RouteObject } from 'react-router-dom';
 import { Navigate, createBrowserRouter, redirect } from 'react-router-dom';
 import type { Key } from 'react';
+import { lazy } from 'react';
 import { cloneDeep } from 'lodash-es';
 import defaultRoute from './modules';
 import type { MenuItem, RouteList } from '@/router/route';
 import type { RouteDataItemType } from '@/server/route';
 import { getRouteApi } from '@/server/route';
 import { setStoreAsyncRouter } from '@/store/modules/route';
 import store from '@/store';
+const ErrorElement = lazy(() => import('@/views/core/error/ErrorElement'));
 
 // import { HomeOutlined } from '@ant-design/icons';
 
@@ -52,6 +54,10 @@ export function handleRouteList(list: RouteList[]): RouteObject[] {
       element: i.element,
     };
 
+    if (i.element) {
+      item.errorElement = <ErrorElement pageType="Page" />;
+    }
+
     if (i.children) {
       item.children = handleRouteList(i.children);
       if (i.redirect && item.children.length) {

src/views/core/error/ErrorElement.tsx

@@ -0,0 +1,34 @@
+import { Result, Typography } from 'antd';
+import { memo } from 'react';
+import { useRouteError } from 'react-router-dom';
+import { useLocale } from '@/locales';
+
+const { Paragraph, Text } = Typography;
+
+interface ErrorElementType {
+  pageType: 'Layout' | 'Page';
+}
+
+const ErrorElement = memo((props: ErrorElementType) => {
+  const errorText = useRouteError() as Error;
+  const intl = useLocale();
+  return (
+    <Result status="error" title={`${props.pageType} Error`} subTitle={errorText.message}>
+      <div className="desc">
+        <Paragraph>
+          <Text
+            strong
+            style={{
+              fontSize: 16,
+            }}
+          >
+            {intl.formatMessage({ id: 'layout.error.element.content' })}
+          </Text>
+        </Paragraph>
+        <Paragraph>{errorText.stack}</Paragraph>
+      </div>
+    </Result>
+  );
+});
+
+export default ErrorElement;