如何处理“未找到（404）”页面？

Question

我想添加第 404 页。我正在使用https://github.com/kriasoft/universal-router进行路由但我不知道我是否做对了。 为此，我添加了 (.*) 路线：

 /* eslint-disable global-require */ // The top-level (parent) route import { CheckForAuth } from "../actions/CustomApis/UsersApi"; import { CONTEXT_PATH } from "../constants/local-urls"; import UniversalRouter from 'universal-router' const routes = { path: CONTEXT_PATH, // Keep in mind, routes are evaluated in order children: [ { path: "/home", load: () => import(/* webpackChunkName: 'home' */ "./home"), }, { path: "/message", load: () => import(/* webpackChunkName: 'message' */ "./message/create"), }, { path: "/", load: () => import(/* webpackChunkName: 'login' */ "./login"), }, { path: "/login", load: () => import(/* webpackChunkName: 'login' */ "./login"), }, { path: "/forgetPassword", load: () => import(/* webpackChunkName: 'forgetPassword' */ "./forgetPassword"), }, { path: "/register", load: () => import(/* webpackChunkName: 'users' */ "./users/register"), }, { path: "/profile", load: () => import(/* webpackChunkName: 'users' */ "./users/profile"), }, { path: "/users/create", load: () => import(/* webpackChunkName: 'users' */ "./users/create"), }, { path: "/users/update/:id", load: () => import(/* webpackChunkName: 'users' */ "./users/update"), }, // Wildcard routes, eg { path: '(.*)', ... } (must go last) { path: '(.*)', // action: () => <h1>Not Found</h1> load: () => import(/* webpackChunkName: 'not-found' */ "./not-found"), }, ], async action({ next }) { // Execute each child route until one of them return the result const route = await next(); // Provide default values for title, description etc. route.title = `${route.title || "Untitled Page"}`; route.description = route.description || ""; return route; }, }; // The error page is available by permanent url for development mode export default routes;

我还设计了 not-found.js 下面的代码是我的 router.js 的内容：

 import UniversalRouter from 'universal-router'; import routes from './routes'; import { goTo } from './util/generalUtil'; export default new UniversalRouter(routes, { resolveRoute(context, params) { if (typeof context.route.load === 'function') { return context.route.load().then(action => action.default(context, params)); } if (typeof context.route.action === 'function') { return context.route.action(context, params); } return undefined; }, });

` 测试未定义页面时出现以下错误：在此处输入图片描述

Answer 1

我认为您是对的，这与通用路由器 package 的此文档中提到的逻辑相同。 所以更多细节可以参考这个链接： https://github.com/kriasoft/universal-router/blob/main/docs/getting-started.md