# react-middleware-router

> A middleware-based router for React

Latest version **0.1.4** (published 2018-08-13) · Apache-2.0 license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2018-08-13 |
| First published | 2018-05-04 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 45.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Chris Abrams |
| Maintainers | chrisabrams |

## Links

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

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^16.4.2
- [history](https://npm.io/package/history.md) ^4.7.2
- [warning](https://npm.io/package/warning.md) ^3.0.0
- [invariant](https://npm.io/package/invariant.md) ^2.2.4
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1
- [path-to-regexp](https://npm.io/package/path-to-regexp.md) ^2.2.1
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.3.1
- [gestalt-middleware](https://npm.io/package/gestalt-middleware.md) ^0.1.0
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.0.0-rc.1
- [gestalt-event-emitter](https://npm.io/package/gestalt-event-emitter.md) ^0.1.0

## Recent versions

- 0.1.4 (latest) — 2018-08-13
- 0.1.3 — 2018-08-13
- 0.1.0 — 2018-05-04

## README

# react-middleware-router
A middleware-based router for React.

## Installation

```
npm install react-middleware-router
```

## Usage
This router is designed to be a drop-in replacement for both `react-router` and if using redux `react-router-redux`.

### Browser Routing
Here is an example of a small app:

```
const { BrowserRouter, Route, Switch } = require('react-middleware-router')

class App extends Component {

  render() {
    return (
      <BrowserRouter history={history}>
        <Switch errorComponent={NotFound} loadingComponent={Spinner}>
          <Route path="/bar" middleware={[barware]} component={Bar} />
          <Route path="/baz" middleware={[bazware]} component={Baz} />
          <Route path="/foo" middleware={[fooware]} component={Foo} />
          <Route exact path="/" component={Home} />
        </Switch>
      </BrowserRouter>
    )
  }
}
```

Notice a few additions:
- `errorComponent` is optionally supplied to `Switch`. There is no need to create a "catch-all" route for errors.
- `loadingComponent` is optionally supplied to `Switch`. This enables an app-wide loading/spinner component which is rendered until the route with middleware has completeing processing the middleware.
- `middleware` is optionally supplied to `Rotue`. This is an array of functions which run before the `component` for the route is rendered. If any middleware return an error the `errorComponent` is rendered instead.

### Browser Routing with Redux

```
const { ConnectedRouter, Route, Switch } = require('react-middleware-router')
const { Provider } = require('react-redux')

class App extends Component {

  render() {
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <Switch errorComponent={NotFound} loadingComponent={Spinner}>
            <Route path="/bar" middleware={[barware]} component={Bar} />
            <Route path="/baz" middleware={[bazware]} component={Baz} />
            <Route path="/foo" middleware={[fooware]} component={Foo} />
            <Route exact path="/" component={Home} />
          </Switch>
        </ConnectedRouter>
      </Provider>
    )
  }
}
```

### Middleware
Here is an exampe of a middleware function:

```
function bazware(o, next) {
  setTimeout(function() {
    next()
  }, 250)
}
```

- The first argument, property `o`, is the object that was optionally passed from a previous middleware.
- The second argument, function `next`, is the callback to tell the middleware it has completed (or errored).
- The first argument to `next` is always an error or `null`.
- The second argument to `next` is the data you want to pass to the next middleware.

#### Passing data or errors to middleware

##### Data
`next(null, {some: 'data'})`

##### Error
`next({some: 'error'})`

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