https://github.com/webbestmaster/react-router-dom-hook

https://github.com/webbestmaster/react-router-dom-hook

Last synced: over 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/webbestmaster/react-router-dom-hook
• Owner: webbestmaster
• License: mit
• Created: 2021-08-04T15:10:49.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2022-05-31T20:40:30.000Z (about 4 years ago)
• Last Synced: 2025-01-14T23:46:21.523Z (over 1 year ago)
• Language: TypeScript
• Size: 123 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

          
# React Router Dom Hook

[![GitHub license](https://img.shields.io/npm/l/react-router-dom-hook)](https://github.com/webbestmaster/react-router-dom-hook/blob/master/license)

[![npm version](https://img.shields.io/npm/v/react-router-dom-hook.svg?style=flat)](https://www.npmjs.com/package/react-router-dom-hook)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/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

```bash

npm i react-router-dom-hook

```

## Usage

```typescript jsx

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, options?: UseUrlHookOptionsType) => void

        pushPathname, // (newPathname: string, options?: UseUrlHookOptionsType) => void

        replaceState, // (newPathname: string, queryMap: Partial, options?: UseUrlHookOptionsType) => void

        replacePathname, // (newPathname: string, options?: UseUrlHookOptionsType) => void

        queries, // current query map

        setQuery, // (queryMap: Partial, options?: UseUrlHookOptionsType) => void

        getQuery, // (key: keyof QueryMap) => string | null

        deleteQuery, // (key: keyof QueryMap) => void

    } = useUrl<{queryMapKey: string}>(); // generic is optional, default is ObjectToUrlParametersType

    return (

        

            to other page

        

    );

}

```