@canlooks/react-router

This is a simple route manager based on my habits.

Installation

``bash
npm i @canlooks/react-router
`

Usage

`tsx
import {Router, RouteItem, Routes} from '@canlooks/react-router'

const routes: RouteItem[] = [
{path: '/', element: },
{path: '/about', element: },
{path: '/user', element: , children: [
{path: ':id', element: }
]}
]

function App() {
return (



)
}
`

or "JSX" style syntax

`tsx
function App() {
return (


} />
} />
}>
} />



)
}
`

API

$3

- mode "history" | "hash" | "memory", default "history"
- base string

$3

- routes Route[]

$3

- path string
- element ReactNode
- children Route[]

$3

Insert matched child route element into the parent component.

`tsx
function User() {
return (
<>
{/ This is matched child route element, such as as in the case above,/}


)
}
`

$3

Get search params from the URL. It will return a URLSearchParams object.

$3

Get dynamic path from the URL. Such as :id in the path /user/:id.

$3

return RouterContext

`tsx
type RouterContext = {
mode: Mode
base: string
location: ILocation
/* The path used to match routes(truncated by {@link base}) /
pathname: string | null

replace(to: To, options?: Omit): void

navigate(to: To, options?: NavigateOptions): void
navigate(delta: number): void

back(): void
forward(): void

state: any
setState: Dispatch>

params: Record
}
``