react-router

@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 { createRoot } from 'react-dom/client'
import { browserNavigation, page, layout, loadable, router, Outlet, usePageSignal } 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 page signal */
const $page = router($location, [
  layout(MainLayout, [
    page('home', loadable(() => import('./Home'), Loader)),
    page('user', loadable(() => import('./User'), Loader))
  ])
])

/* Root component */
function App() {
  const Page = usePageSignal($page)

  return Page ? <Page /> : null
}

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

In MainLayout, use Outlet to render the matched child page:

import { Outlet } from '@nano_kit/react-router'

export function MainLayout() {
  return (
    <div className="layout">
      <main>
        <Outlet />
      </main>
    </div>
  )
}

Documentation

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