# react-director-router

> A versatile router

Latest version **1.0.4** (published 2018-02-10) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-02-10 |
| First published | 2018-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 407.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Fernando de França |
| Maintainers | fernandodefranca |

## Links

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

## Dependencies (2)

- [director](https://npm.io/package/director.md) ^1.2.8
- [query-string](https://npm.io/package/query-string.md) ^5.1.0

## Recent versions

- 1.0.4 (latest) — 2018-02-10
- 1.0.3 — 2018-02-10
- 1.0.1 — 2018-02-10
- 1.0.0 — 2018-02-04

## README

# react-director-router
A versatile React Router based on [Director](https://github.com/flatiron/director) 

## Features
- Inject route props into your views (route parameters, query parameters).
- Inject custom props into your views.
- Auto wraps views with any chosen Higher Order Component.
- Route handler functions will be fired on route change and will receive route params, query params and injected props.
- Small footprint (7kb gzipped).

## Advantages
Makes your components cleaner by:

- discouraging to rely on `componentDidMount` for async data loading or state management. 
- avoiding repetitive "glue code" by auto wrapping HOCs.

By using route handlers your view components can be **more functional**, **more view related** and carry **less business logic**.

Therefore  view component tests would be simpler.

## Demo ##
`yarn start-example`

## Usage ##

### Install
`yarn add react-director-router`

### App.js
```js
import Router from 'react-director-router'

import HomeView from '../Views/HomeView'
import BookWithStatus from '../Views/BookWithStatus'
import NotFoundView from '../Views/NotFoundView'

const routes = [
  {
    path:'/',
    viewClass: HomeView,
    handler: () => {
      console.log('Home handler');
    }
  },
  {
    path:'/book/:status/:id',
    viewClass: BookWithStatus,
    handler: (params) => {
      console.log('/book/:status/:id > ', params)
    },
  },
  {
    path:'/not-found',
    viewClass: NotFoundView
  },
]

const notFoundPath = '/not-found'

const customProps = {
  foo: 'bar', 
  count: 9000, 
  userRoles: ['basic-user']
}

const HOCs = [
  view => someHigherOrderComponent(view),
  view => anotherHigherOrderComponent(view),
]

const middlewares = [
  (injectedProps, params, queryParams, route) => {
    console.log(':: Log Middleware ::', route.viewClass.name);
  }
]

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router
          routes={routes}
          notFoundPath={notFoundPath}
          injectProps={customProps} 
          middlewares={middlewares}
          viewHOCs={HOCs}
        />
      </div>
    )
  }
}
export default App
```

### Middlewares
Middlewares are functions that can intercept every route change and are a great opportunity to restrict a route or redirect the navigation flow.

By returning false on any middleware function, the middleware execution sequence will be interrupted, the view will not render and the route handler will not run. You can then redirect the navigation flow acording to the desired business logic.

Another common use for a middleware is logging navigation activity.

#### Example

A role restriction middleware:

```js
import { redirect } from 'react-director-router'

export default function roleRestrictedMiddleware(injectedProps, params, queryParams, route) {
    if (route.requiredRoles && injectedProps.userRoles){
      console.log(':: roleRestrictedMiddleware ::');
      const isAllowed = injectedProps.userRoles === route.requiredRoles

      if (!isAllowed){
        redirect('restricted-content')
        return isAllowed
      }
    }
  }
```

## Roadmap
- Hash navigation
- Async routing

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