# navigation-react

> React plugin for the Navigation router

Latest version **4.24.1** (published 2026-11-03) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install navigation-react
pnpm add navigation-react
yarn add navigation-react
bun add navigation-react
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.24.1 |
| Published | 2026-11-03 |
| First published | 2015-04-29 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 131 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 661 |
| Author | Graham Mendick |
| Maintainers | grahammendick |
| Keywords | router, navigation, react |

## Links

- npm: https://www.npmjs.com/package/navigation-react
- Repository: https://github.com/grahammendick/navigation
- Homepage: http://grahammendick.github.io/navigation/
- Issues: https://github.com/grahammendick/navigation/issues
- npm.io page: https://npm.io/package/navigation-react

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

- 4.24.1 (latest) — 2026-11-03
- 4.16.1-rsc.0 (rsc) — 2026-06-28
- 4.24.0 — 2026-11-01
- 4.23.0 — 2026-10-22
- 4.22.0 — 2026-10-16
- 4.21.0 — 2026-09-23
- 4.20.0 — 2026-08-12
- 4.19.1 — 2026-08-09
- 4.19.0 — 2026-08-01
- 4.18.0 — 2026-07-30
- 4.17.0 — 2026-07-05
- 4.16.1 — 2026-04-15
- 4.16.0 — 2026-04-10
- 4.15.0 — 2025-12-07
- 4.14.0 — 2025-09-26
- … 33 more at https://npm.io/package/navigation-react/versions

## README

# Hello World
```jsx
import { StateNavigator } from 'navigation';
import { NavigationHandler, NavigationLink, NavigationContext, SceneView } from 'navigation-react';

const stateNavigator = new StateNavigator([
  { key: 'hello', route: '' },
  { key: 'world' }
]);

stateNavigator.start();

const Hello = () => (
  <NavigationLink
    stateKey="world"
    navigationData={{ size: 20 }}>
    Hello
  </NavigationLink>
);

const World = () => {
  const { data } = useContext(NavigationContext);
  return (
    <div style={{ fontSize: data.size }}>World</div>
  );
};

const App = () => (
  <NavigationHandler stateNavigator={stateNavigator}>
    <SceneView active="hello"><Hello /></SceneView>
    <SceneView active="world"><World /></SceneView>
  </NavigationHandler>  
);
```

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