如何處理“未找到（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