@canlooks/react-router

This is a simple route manager based on my habits.

Installation

npm i @canlooks/react-router

Usage

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

const routesEntry: RouteItem = {
    layout: <Home/>,
    children: {
        'about': {
            layout: <About/>
        },
        'user': {
            layout: <UserLayout/>,
            page: <User/>,
            children: {
                ':id': <UserInfo/>
            }
        }
    }
}

function App() {
    return (
        <Router entry={routesEntry}/>
    )
}

API

Router

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

Routes

• routes Route[]

Route

• path string
• element ReactNode
• children Route[]

Outlet

Insert matched child route element into the parent component.

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

useQuery()

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

useParams()

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

useRouter()

return RouterContext

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

    replace(to: To, options?: Omit<NavigateOptions, 'replace'>): void

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

    back(): void
    forward(): void

    state: any
    setState: Dispatch<SetStateAction<any>>

    params: Record<string, string>
}