Errors

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.

Getting started

Routing

State Management

Authentication

404 Pages

General Error Pages

​404 Pages

​General Error Pages

404 Pages

General Error Pages