react-router-dom-hook v0.0.14

React Router Dom Hook

Hook to work with react-router-dom@5.x. Helpful component (NavigationLink) included!

Deprecated. Use react-router-dom@6+, it already includes all needed hooks.

Install

npm i react-router-dom-hook

Usage

import {BrowserRouter, Route, Switch} from 'react-router-dom';
import {useUrl, NavigationLink} from 'react-router-dom-hook';

export function ExampleComponent(): JSX.Element {
    // WARNINGS:
    // 1 - react-router-dom is required
    // 2 - use inside BrowserRouter -> Switch only

    const {
        pathname, // string, current path name
        pushState, // (newPathname: string, queryMap: Partial<QueryMap>, options?: UseUrlHookOptionsType) => void
        pushPathname, // (newPathname: string, options?: UseUrlHookOptionsType) => void
        replaceState, // (newPathname: string, queryMap: Partial<QueryMap>, options?: UseUrlHookOptionsType) => void
        replacePathname, // (newPathname: string, options?: UseUrlHookOptionsType) => void
        queries, // current query map
        setQuery, // (queryMap: Partial<QueryMap>, options?: UseUrlHookOptionsType) => void
        getQuery, // (key: keyof QueryMap) => string | null
        deleteQuery, // (key: keyof QueryMap) => void
    } = useUrl<{queryMapKey: string}>(); // generic is optional, default is ObjectToUrlParametersType

    return (
        <NavigationLink
            isSaveQueries={false} // boolean, optional, default is true, save or remove existed query
            queries={{newQuery: 'it-is-me!'}} // ObjectToUrlParametersType, optional, default is {}, new query map, existed query will be replaced
            to="new/path" // string, required, new pathname
        >
            to other page
        </NavigationLink>
    );
}