Hooks

useParams

In some cases you want to extract parameters without being in a Route component. You can get a memoized parameters object for the given path like this:

export const Component = () => {
    const params = useParams<{ id: string }>("/news/:id");
    //...
};

useRouter

Router internally adds a RouterContext to your application, which you can access using the useRouter() hook:

import { useRouter } from "@react-nano/router";
...
export function Component() {
    // router is of type RouterContextValue (see below)
    const router = useRouter();
    ....
}

RouterContextValue is defined as:

export interface RouterContextValue {
    basename: string;
    path: string;
    history: RouterHistory;
    matchRoute: CachedRouteMatcher;
    urlTo: (path: string) => string;
}
// with:
export interface RouterHistory {
    push: (path: string) => void;
    replace: (path: string) => void;
    stop: () => void; // for internal use, do not call.
    urlTo: (path: string) => string;
}
// and:
export type CachedRouteMatcher = (pattern: string, path: string) => (RouteParams | null);

urlTo() can be used to create a new url, which respects basename and mode. It's the same for both RouterContextValue and RouterHistory.