# react-router-namesake

> Named routes for react-router

Latest version **0.3.2** (published 2018-04-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-router-namesake
pnpm add react-router-namesake
yarn add react-router-namesake
bun add react-router-namesake
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2018-04-26 |
| First published | 2018-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 14.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Maintainers | jhsu |
| Keywords | react, router, route, routing, react-router, navigation, link |

## Links

- npm: https://www.npmjs.com/package/react-router-namesake
- Repository: https://github.com/jhsu/react-router-namesake
- Issues: https://github.com/jhsu/react-router-namesake/issues
- npm.io page: https://npm.io/package/react-router-namesake

## Dependencies (2)

- [history](https://npm.io/package/history.md) ^4.7.2
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.3.0-rc.2

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 0.3.2 (latest) — 2018-04-26
- 1.0.0-beta.5 (beta) — 2019-10-31
- 1.0.0-beta.4 — 2019-09-27
- 1.0.0-beta.3 — 2019-09-25
- 1.0.0-beta.2 — 2019-09-24
- 1.0.0-beta.1 — 2019-09-16
- 1.0.0-beta.0 — 2019-09-16
- 0.3.1 — 2018-04-26
- 0.3.0 — 2018-04-26
- 0.2.2 — 2018-04-20
- 0.2.1 — 2018-04-20
- 0.2.0 — 2018-04-20
- 0.1.2 — 2018-04-20

## README

![react-router-namesake logo](logo.png)

# react-router-namesake
[![Build Status](https://travis-ci.org/jhsu/react-router-namesake.svg?branch=master)](https://travis-ci.org/jhsu/react-router-namesake)


## Example

```jsx
import { Switch } from "react-router";
import { BrowserRouter, Route, Link } from "react-router-dom";
import { Router as NamesakeRouter, WithNamesake, NamesakeLink, NamesakeRoute } from "react-router-namesake";

const ButtonLink = ({ to, params }) => {
  return <WithNamesake>{({ routes }) => (
    <button onClick={() => routes.transitionTo(path, params)}>{this.props.children}</button>
  )}</WithNamesake>;
}

const App = () => (
  <div>
    <BrowserRouter>
      <Route>{({ history }) => (
        <NamesakeRouter
          push={history.push}
          routes={{
            home: "/home",
            users: "/users",
            user: "/users/:userId"
          }}
        >
          <div>
            <nav>
              <NamesakeLink to="home">Home</NamesakeLink>
              <NamesakeLink to="users">users</NamesakeLink>
              <NamesakeLink to="user" params={{ userId: 123 }}>
                user id 123
              </NamesakeLink>
            </nav>

            <NamesakeRoute exact path='user'>
              <p>This renders for /user/:userId</p>
            </NamesakeRoute>

            <ButtonLink to='user' params={{ userId: 123 }}>Go to User 123</ButtonLink>

            <Switch>
              <Route exact path="/home">
                <h2>Home</h2>
              </Route>
              <Route exact path="/users">
                <h2>Users Page</h2>
              </Route>
              <Route exact path="/users/:userId">
                <h2>A User's Page</h2>
              </Route>
            </Switch>
          </div>
        </NamesakeRouter>
      )}</Route>
    </BrowserRouter>
  </div>
);
```

[demo](https://codesandbox.io/s/2o6mv5nx5p)

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