> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hana.leafphp.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Router Config

> Add extra options to Hana router for your app

Hana router is already configured for you right out of the box, but you can add a few options to change the functionality to match your application's exact specs. Configuration can be done through the hana vite plugin in your vite config file

## Application Pages Directory

This is where Hana will load your routes from, and defaults to `src/pages`

```ts theme={"theme":"ayu-dark"}
import { defineConfig } from 'vite';
import { hana } from '@hanabira/router';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
	react(),
	tailwindcss(),
    hana({
      pages: 'app'
    }),
  ],
});
```

This config above changes the pages directory to the `app` folder, so your routes will look like `app/home/index.tsx`

## TypeScript Support

You can toggle TS support using the `typescript` config option:

```ts theme={"theme":"ayu-dark"}
hana({
	typescript: true
}),
```

## Lazy Route Loading

Hana automatically applies lazy loading to all your routes, which helps reduce bundle sizes and improves the overall performance of your app especially over not-so-good connections. You can toggle this using the `useLazy` option

```ts theme={"theme":"ayu-dark"}
hana({
	useLazy: true
}),
```

## Router Mode

Hana supports history and hash mode for routing, and you can select the option you prefer using the `mode` key

```ts theme={"theme":"ayu-dark"}
hana({
	mode: 'hash'
}),
```