@nano_kit/react-router

The @nano_kit/react-router package provides React integration for @nano_kit/router. It allows you to use the router's powerful features like code splitting, dependency injection, and state management directly within your React application.

Installation

pnpm add @nano_kit/store @nano_kit/router @nano_kit/react @nano_kit/react-router
# or
npm install @nano_kit/store @nano_kit/router @nano_kit/react @nano_kit/react-router
# or
yarn add @nano_kit/store @nano_kit/router @nano_kit/react @nano_kit/react-router

Quick Start

Basically, @nano_kit/react-router re-exports everything from @nano_kit/router, so you can use all base router functions:

import { browserNavigation, app, layout, page, loadable, Outlet } from '@nano_kit/react-router'
import { MainLayout } from './MainLayout'

/* Define routes config */
const routes = {
  home: '/',
  user: '/users/:id'
} as const

/* Create navigation */
const [$location, navigation] = browserNavigation(routes)

/* Define loader fallback */
const Loader = () => <div>Loading...</div>

/* Create App component */
const App = app($location, [
  layout(MainLayout, [
    page('home', loadable(() => import('./Home'), Loader)),
    page('user', loadable(() => import('./User'), Loader))
  ])
])

/* Render App */
createRoot(document.getElementById('root')!).render(<App />)

Documentation

For comprehensive guides, API reference, and integration patterns, visit the documentation website.