# @blendsdk/mobx-router

> React Mobx router for @blendsdk

Latest version **0.0.11** (published 2019-09-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @blendsdk/mobx-router
pnpm add @blendsdk/mobx-router
yarn add @blendsdk/mobx-router
bun add @blendsdk/mobx-router
```

## 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.0.11 |
| Published | 2019-09-16 |
| First published | 2019-09-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 23 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Gevik Babakhani |
| Maintainers | truesoftware, blendjs |
| Keywords | react, mobx, router |

## Links

- npm: https://www.npmjs.com/package/@blendsdk/mobx-router
- Repository: https://github.com/blendsdk/react
- Homepage: https://github.com/blendsdk/react#readme
- Issues: https://github.com/blendsdk/react/issues
- npm.io page: https://npm.io/package/@blendsdk/mobx-router

## Dependencies (7)

- [mobx](https://npm.io/package/mobx.md) ^5.13.0
- [react](https://npm.io/package/react.md) ^16.9.0
- [history](https://npm.io/package/history.md) ^4.10.1
- [mobx-react](https://npm.io/package/mobx-react.md) ^6.1.3
- [@types/history](https://npm.io/package/@types/history.md) ^4.7.3
- [path-to-regexp](https://npm.io/package/path-to-regexp.md) ^3.1.0
- [@blendsdk/stdlib](https://npm.io/package/@blendsdk/stdlib.md) ^1.1.4

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.11 (latest) — 2019-09-16

## README

# Mobx React Router

This package provides a URL Router component based on Mobx and the History API.

The utilities and the component is this package are written in TypeScript and
they are meant to be used in a React TypeScript project.

## Installation

```sh
npm install @blendsdk/mobx-router --save
```

```sh
yarn add @blendsdk/mobx-router
```

## Usage

```ts
import {
    createBrowserHistory,
    initRouter,
    IRoute,
    Link,
    Redirect,
    ROUTE_404,
    ROUTE_CATCH_ALL,
    Router,
    useRouter
} from "@blendsdk/mobx-router";

// Step 1: First we initialize the History provider
// For more information the the history package on npmjs
initRouter(createBrowserHistory());

// Step 2: Create some routes
//     Every rout needs to have:
//          - A name; that is used to identify the Route
//          - A path; that is used as a template to generate an URL
//          - A component; that is rendered in the incoming URL is matched to the path
//          - Optionally; a key/value pare providing default values for the path parameters
const routes: IRoute[] = [
    {
        name: "dashboard",
        path: "/",
        component: Dashboard
    },
    {
        name: "greet",
        path: "/greet/:name/name",
        component: Greet,
        // The default value of the :name parameter
        defaults: {
            name: "Johny Bravo"
        }
    },
    {
        // If no route is matched then this one is chosen as fallback
        name: ROUTE_CATCH_ALL,
        path: "",
        component: Dashboard
    }
];

// Step 3: Render the router with the routes parameter
const Main = () => {
    return <Router routes={routes}></Router>;
};

ReactDOM.render(<Main />, document.getElementById("root"));
```

## 404 Route

If you do not wish to configure a `catch all` route then you have the option to configure a 404
route to catch the unmatched location changes. The `Router` component provides a default 404 route
if the incoming URL is not matched and there is also no `catch all` route.

To customize the built-in 404 route, just configure a route similar to:

```ts
....
    {
        name: ROUTE_404,
        path:"/not-found", // or something meaningful path name
        component: My404PageComponent // your custom 404 page
    }
....
```

## The `Link` component

This component provides an easy way to render a link that is handled by the `Router`.

Properties:

-   `to` is the name of the route
-   `params` is a key/value pare to set the route parameters
-   `reload` an optional boolean that if set to true will reload the page when the link is clicked

```ts
<Link to='name-of-the-route' params={{ name: "sally" }} reload={true}>
    Text goes here...
</Link>
```

```ts
<Link to='order-items' params={{ order: someValue }}>
    Text goes here
</Link>
```

## The `Redirect` component

This component is similar to the `Link` component except that is does not generate a user interface.
When this component is rendered it will immediately redirect the to provided route.

Properties:

-   `to` is the name of the route
-   `params` is a key/value pare to set the route parameters
-   `reload` an optional boolean that if set to true will redirect by reloading the page.

```ts
const SomeComponent = () => {
    return authenticated ? <Dashboard /> : <Redirect to='login' params={{ param1: true }} reload={true} />;
};
```

## Hooks

In order to get a reference to the router you can make use of the `useRouter` hook

```ts
const Component = () => {
    const router = useRouter();
    ...
};
```

## API

The router component provides the following API

### The `go` method

```ts
    const router = useRouter();

    // Navigate to a route
    router.go('name-of-the-route', { param1,'value1' });

    // Navigate to a route by reloading the page
    router.go('name-of-the-route', { param1,'value1' }, true);
```

### The `generateUrl`

This method generates a URL based on a path name or a parameters.

```ts
const router = useRouter();
const url = router.generateUrl("order-item", { orderNumber: 1000 });
```

## License

MIT

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