how to handle "not found (404)" page?

Question

I want to add page 404. I'm using https://github.com/kriasoft/universal-router for routing But I do not know if I did it right or not. To do this, I add the (.*) route:

 /* 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;

I also designed not-found.js The following code is the contents of my 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; }, });

` The following error occurs when testing undefined page: enter image description here

Answer 1

I think you are right, it is the same logic mentioned within this doc too of the universal router package. So for more details, you can refer to this link: https://github.com/kriasoft/universal-router/blob/main/docs/getting-started.md