# mr-router5
> mr-router5 uses Router5 together with MobX for your favorite React application.
Latest version **7.0.0-beta.1** (published 2023-11-15) · MIT license · 0 weekly downloads
## Install
```sh
npm install mr-router5
pnpm add mr-router5
yarn add mr-router5
bun add mr-router5
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 7.0.0-beta.1 |
| Published | 2023-11-15 |
| First published | 2019-02-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 16 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | pzmosquito |
| Maintainers | pzmosquito |
| Keywords | router5, react, mobx, router, routing |
## Links
- npm: https://www.npmjs.com/package/mr-router5
- Repository: https://github.com/pzmosquito/mr-router5
- Homepage: https://github.com/pzmosquito/mr-router5#readme
- Issues: https://github.com/pzmosquito/mr-router5/issues
- npm.io page: https://npm.io/package/mr-router5
## Dependencies (1)
- [router5-transition-path](https://npm.io/package/router5-transition-path.md) ^8.0.1
## 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
- 7.0.0-beta.1 (latest) — 2023-11-15
- 7.0.0-beta.0 (beta) — 2023-11-14
- 6.1.0 — 2023-09-29
- 6.0.0 — 2022-06-16
- 5.0.2 — 2022-02-17
- 5.0.1 — 2022-02-16
- 5.0.1-beta.0 — 2021-12-02
- 5.0.0 — 2021-11-01
- 5.0.0-beta.0 — 2021-07-29
- 4.0.1 — 2020-09-22
- 4.0.0 — 2020-09-22
- 3.2.1 — 2020-07-20
- 3.2.0 — 2020-04-18
- 3.1.0 — 2020-03-03
- 3.0.3 — 2020-01-24
- … 22 more at https://npm.io/package/mr-router5/versions
## README
# mr-router5 [](https://www.npmjs.com/package/mr-router5) [](https://bundlephobia.com/result?p=mr-router5)
mr-router5 uses [Router5](https://router5.js.org) together with [MobX](https://mobx.js.org) for your favorite React application.
- `router5` is an awesome framework and view library agnostic router.
- `MobX` is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.
## Why mr-router5
mr-router5 creates a minimal bridge between router5, MobX and React. When I say 'minimal bridge', I really mean it. Your React components stay untouched, there's no need to create HOC for your root App component. The route view features makes the route transition more flexible and powerful.
## Peer Dependencies
- `mobx`: ^6,
- `mobx-react-lite`: ^3 || ^4,
- `react`: >=16.8,
- `router5`: ^7 || ^8
## Installation
`npm install --save mr-router5`
## Basic Usage
Integrating `mr-router5` into your React application is straightforward. Below is an example that demonstrates the essential steps:
1. **Create Route Node Components**: Start by creating the route node components.
*see [router5](https://router5.js.org/introduction/core-concepts) docs for the core concepts.*
```js
export const RootNode = () => (
Site Header
{/*
IMPORTANT: The 'routeNodeName' prop must match the route node name defined in step 2!
(empty string for root route node)
*/}
Footer
);
export const UserNode = () => (
User Page
);
```
2. **Set Up Route Views**: `mr-router5` utilizes `RouteView` to associate routes with components. Here, we define a set of route views, linking each route to its respective component.
```js
import { RouteView } from "mr-router5";
// import route nodes and other components
const routeViews = [
new RouteView({name: "home", path: "/"}, Home),
new RouteView({name: "users", path: "/users"}, UserNode),
new RouteView({name: "users.list", path: "/list"}, UserList),
new RouteView({name: "users.view", path: "/view"}, UserView),
];
```
Note: `mr-router5` currently supports only flat routes, meaning nested routes are not yet available.
3. **Initialize and start the Router**: Create and initialize the router with the defined route views. This sets up the routing logic for your application. Finally start the router to enable route handling in your application.
*see [router5](https://router5.js.org/guides/defining-routes#adding-routes) docs for adding options and dependencies.*
```js
const options = {};
const dependencies = {};
const router = routerStore.createRouter(routeViews, options, dependencies);
router.start(() => {
render(, document.getElementById("app"));
});
```
## Extra Features
You can add extra functionalities to route views by attaching the `extra` and `dataLoader` payload. There are many ways to use them, one example would be middleware. The middleware is ideal for fetching data or checking authentication prior to navigating to the target route. The `extra` and `dataLoader` payload will further streamline the original router5 middleware implementation.
*see [router5](https://router5.js.org/advanced/middleware) docs for adding middlewares.*
1. **Attach Extra and DataLoader**: You can attach additional data or loaders to your route views. This is useful for scenarios like data preloading or conditional route handling.
```js
import { RouteView } from "mr-router5";
// import route nodes and other components
const routeViews = [
new RouteView({name: "login", path: "/login"}, Login),
new RouteView({name: "user", path: "/user"}, UserComponent)
.setExtra("user", "John Doe")
.setExtra("requireLogin", true)
.setDataLoader("getUserDetail", (user) => ({ /* user details */ }))
];
```
2. **Middleware Implementation**: `makeMiddleware()` simplifies and adds additional context to the original router5 middleware implementation.
```js
import { makeMiddleware } from "mr-router5";
const middleware = (middlewareData) => {
// middlewareData is an object that can be destructured with the following properties.
const {
router,
toState,
fromState,
done,
getDataLoader,
getExtra,
} = middlewareData;
// skip login check if 'requireLogin' is false.
if (!getExtra("requireLogin", false)) {
done();
}
else {
// check if user is logged in
const isLoggedIn = true;
if (isLoggedIn) {
const user = getExtra("user");
const userDetail = getDataLoader("getUserDetail")(user);
done();
}
else {
done({ redirect: { name: "login" } });
}
}
}
router.useMiddleware(makeMiddleware(middleware));
```
That's it. Enjoy routing.
---
_Source: https://npm.io/package/mr-router5 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._