Layouts

Layouts allow you create a structure that is applied to a set of routes, for instance you can have a dashboard layout that is applied to all your dashboard routes. Layouts allow you write components like your headers, footers and sidebars once and apply them wherever necessary

Creating a Layout

Hana automatically detects your layout component by looking for a _layout.tsx file in the pages directory. The _layout.tsx file should export a React component that will be rendered while a page is being fetched.

src/pages/_layout.tsx

const Layout: React.FC<React.PropsWithChildren> = ({ children }) => {
  return (
    <div>
      <header>Header</header>
      <main>
        <div>{children}</div>
      </main>
      <footer>Footer</footer>
    </div>
  );
};

export default Layout;

Scoped Layout Components

Hana allows you to have multiple _layout.tsx files. For example, you can have a _layout.tsx file in the pages/users directory that will be used for all pages in the /users directory.

|- pages
  |- index.tsx
  |- _layout.tsx
  |- users
    |- _layout.tsx

Considering the directory structure above, the _layout.tsx file in the pages/users directory will be used for all pages in the /users directory. The _layout.tsx file in the pages directory will be used for all other pages.

Loading Layouts

You can also create layouts that show up only a page is being loaded by adding a _loading file. This uses React’s Suspense API under the hood, so you can use it with any asynchronous data fetching library.

src/pages/_loading.tsx

const Loading: React.FC = () => {
  return <div>Loading...</div>;
};

export default Loading;

And just like with _layout files, your loading layout files can also be scoped to particular folders, and you can have as many as you need in your application

|- pages
  |- index.tsx
  |- _loading.tsx
  |- users
    |- _loading.tsx

Getting started

Routing

State Management

Authentication

Creating a Layout

Scoped Layout Components

Loading Layouts

​Creating a Layout

​Scoped Layout Components

​Loading Layouts

Creating a Layout

Scoped Layout Components

Loading Layouts