Skip to main content
Hana router provides default error pages for 404 and 500 errors, however, we recommend updating them with your own custom pages

​
404 Pages

When a user enters a route that doesn’t exist in your app, Hana will look for a _404 file, and render the component exported from that file.
src/pages/_404.tsx
const NotFound: React.FC = () => {
  return <div>404 - Not Found</div>;
};

export default NotFound;

​
General Error Pages

When an error is thrown within your application, Hana will catch the error and display whatever component is in your _error file.
src/pages/_error.tsx
import { useRouteError } from "@hanabira/router";

export default function ErrorPage() {
  const error: any = useRouteError();
  console.log(error, 'error');

  return <div>Error</div>;
}
Usually your application will only have one error page, however, Hana allows you to create error pages scoped to only particular folders. For example, you can have a _error.tsx file in the pages/users directory that will be used for all errors that occur on routes in the /users directory. 
|- pages
  |- index.tsx
  |- _error.tsx
  |- users
    |- _error.tsx
Considering the directory structure above, the _error.tsx file in the pages/users directory will be used for all errors that occur on routes in the /users directory. The _error.tsx file in the pages directory will be used for all other errors.