Skip to main content
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 
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: 
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 
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 
hana({
	mode: 'hash'
}),