# 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/p

Latest version **0.0.14** (published 2022-04-01) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-router-dom-hook
pnpm add react-router-dom-hook
yarn add react-router-dom-hook
bun add react-router-dom-hook
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2022-04-01 |
| First published | 2021-08-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | webbestmaster |

## Links

- npm: https://www.npmjs.com/package/react-router-dom-hook
- Repository: https://github.com/webbestmaster/react-router-dom-hook
- Homepage: https://github.com/webbestmaster/react-router-dom-hook#readme
- Issues: https://github.com/webbestmaster/react-router-dom-hook/issues
- npm.io page: https://npm.io/package/react-router-dom-hook

## Recent versions

- 0.0.14 (latest) — 2022-04-01
- 0.0.13 — 2021-11-08
- 0.0.12 — 2021-09-18
- 0.0.11 — 2021-09-07
- 0.0.10 — 2021-09-07
- 0.0.9 — 2021-09-07
- 0.0.8 — 2021-08-26
- 0.0.7 — 2021-08-10
- 0.0.6 — 2021-08-06
- 0.0.5 — 2021-08-06
- 0.0.4 — 2021-08-06
- 0.0.3 — 2021-08-06
- 0.0.2 — 2021-08-06
- 0.0.1 — 2021-08-04

## 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)
<!-- [![GitHub stars](https://img.shields.io/github/stars/webbestmaster/react-router-dom-hook?style=social&maxAge=2592000)](https://github.com/webbestmaster/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<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>
    );
}
```

---
_Source: https://npm.io/package/react-router-dom-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._