# @blueeast/bluerain-plugin-react-router

> A BlueRain Plugin that adds cross platform routing via react-router v4

Latest version **1.1.5** (published 2018-05-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @blueeast/bluerain-plugin-react-router
pnpm add @blueeast/bluerain-plugin-react-router
yarn add @blueeast/bluerain-plugin-react-router
bun add @blueeast/bluerain-plugin-react-router
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2018-05-04 |
| First published | 2017-09-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=6.0.0 |
| Dependencies | 10 |
| Unpacked size | 31.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | BlueEast Team |
| Maintainers | artalat, bjavaid |

## Links

- npm: https://www.npmjs.com/package/@blueeast/bluerain-plugin-react-router
- Repository: https://github.com/BlueEastCode/bluerain-plugin-react-router
- Homepage: https://github.com/BlueEastCode/bluerain-plugin-react-router#readme
- Issues: https://github.com/BlueEastCode/bluerain-plugin-react-router/issues
- npm.io page: https://npm.io/package/@blueeast/bluerain-plugin-react-router

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^16.3.2
- [redux](https://npm.io/package/redux.md) ^3.7.2
- [history](https://npm.io/package/history.md) ^4.7.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.3.2
- [react-redux](https://npm.io/package/react-redux.md) ^5.0.6
- [react-router](https://npm.io/package/react-router.md) 4.2.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.2.2
- [react-router-redux](https://npm.io/package/react-router-redux.md) ^5.0.0-alpha.8
- [react-router-native](https://npm.io/package/react-router-native.md) ^4.2.0
- [@blueeast/bluerain-os](https://npm.io/package/@blueeast/bluerain-os.md) ^3.13.3

## Recent versions

- 1.1.5 (latest) — 2018-05-04
- 1.1.4 — 2018-04-24
- 1.1.3 — 2018-04-24
- 1.1.2 — 2018-03-14
- 1.1.1 — 2018-02-26
- 1.1.0 — 2018-02-17
- 1.0.7 — 2018-02-03
- 1.0.6 — 2018-01-29
- 1.0.5 — 2018-01-28
- 1.0.4 — 2018-01-27
- 1.0.3 — 2018-01-26
- 1.0.2 — 2018-01-25
- 1.0.1 — 2018-01-23
- 1.0.0 — 2018-01-22
- 0.5.0 — 2017-10-07
- … 7 more at https://npm.io/package/@blueeast/bluerain-plugin-react-router/versions

## README

# React Router

[React Router V4](https://github.com/ReactTraining/react-router) and [Redux integration](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux).

Internally, uses [react-router-dom](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom) for browser based apps and [react-router-native](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-native) for react native apps. Moreover, re-exports both packages on their respective platforms.

## Usage

Run the following command in the plugin directoy:

```shell
npm i --save @blueeast/bluerain-plugin-react-router
```

Then in your boot function, pass the plugin like this:

```javascript
import BR from '@blueeast/bluerain-os';
import ReactRouterPlugin from '@blueeast/bluerain-plugin-react-router';

BR.boot({
    plugins: [ReactRouterPlugin]
})
```

## Components

This plugin registers following components in the Component registry, so they can be reused later by other apps and plugins:

### Link

React Router's Link component.

More Info: [Web](https://reacttraining.com/react-router/web/api/Link), [Native](https://reacttraining.com/react-router/native/api/Link)

#### Route

React Router's Route component.

More Info: [Web](https://reacttraining.com/react-router/web/api/Route), [Native](https://reacttraining.com/react-router/native/api/Route)

#### RouterSwitch

React Router's Switch component.

More Info: [Web](https://reacttraining.com/react-router/web/api/Switch), [Native](https://reacttraining.com/react-router/native/api/Switch)

#### Redirect

React Router's Redirect component.

More Info: [Web](https://reacttraining.com/react-router/web/api/Redirect), [Native](https://reacttraining.com/react-router/native/api/Redirect)

#### RouterActions

This component follows the render prop pattern to provide router actions. These actions can be used to navigate between routes.

```jsx
<BR.Components.RouterActions>
  {({ go, goBack, goForward, push, replace }) => {
    // use the param actions to navigate routes
    push('/some-path');
  }}
</BR.Components.RouterActions>
```

#### RouterConsumer

This component follows the render prop pattern to provide the following:

- [match](https://reacttraining.com/web/api/match)
- [location](https://reacttraining.com/web/api/location)
- [history](https://reacttraining.com/web/api/history)

```jsx
<BR.Components.RouterConsumer>
  {({ match, location, history }) => {
    console.log(location.pathname);
  }}
</BR.Components.RouterConsumer>
```

## Hooks

This plugin provides complete flexibility to modify the react router configuration. This is done by providing various filter hooks at different stages of router initialization.

### **bluerain.system.app**

This hook gives the ability to modify the main System App component that gets wrapped in react-router-redux's ConnectedRouter.

#### **Parameters:**

| Name      | Type            | Description                    |
| --------- | --------------- | ------------------------------ |
| SystemApp | React.Component | The main system app component. |

#### **Returns:**

| Name      | Type            | Description                    |
| --------- | --------------- | ------------------------------ |
| SystemApp | React.Component | The main system app component. |

#### **Example:**

This example wraps the System App with a ConnectedRouter provider by using a `withReactRouter` higher order component (HOC).

```javascript
import BR from '@blueeast/bluerain-os';
import withReactRouter from './withReactRouter';
BR.Filters.add('bluerain.system.app',  (
            App: typeof React.Component
        ) =>{
            return withReactRouter(App, client);
        });
    }
```

### **router.config**

Any plugin/app can add this hook to modify router plugin configs.

### **bluerain.redux.reducers.bluerain**

This hook gives the ability to modify the nested bluerain reducer. This plugin adds incoming reducers into routerReducer from react-router-redux using this hook.

**Parameters:**

| Name     | Type   | Description                                                                                                         |
| -------- | ------ | ------------------------------------------------------------------------------------------------------------------- |
| reducers | Object | The reducer object. This object will be sent as a param to the `combineReducers` of Redux after callback execution. |

**Returns:**

| Name     | Type   | Description                                                                                                         |
| -------- | ------ | ------------------------------------------------------------------------------------------------------------------- |
| reducers | Object | The reducer object. This object will be sent as a param to the `combineReducers` of Redux after callback execution. |

### **bluerain.redux.middlewares**

This hook gives the ability to add or modify custom middlewares to the main redux store.

**Parameters:**

| Name        | Type  | Description                                                                                                                           |
| ----------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------- |
| middlewares | Array | This is an array of redux middlewares. This array will be sent as a param to the `applyMiddleware` of Redux after callback execution. |

**Returns:**

| Name        | Type  | Description                                                                                                                           |
| ----------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------- |
| middlewares | Array | This is an array of redux middlewares. This array will be sent as a param to the `applyMiddleware` of Redux after callback execution. |

**Example:**

This example adds a taskbar reducer to bluerain state, which will be accessible at `bluerain.taskbar`.

```javascript
import BR from '@blueeast/bluerain-os';
import customMiddleware from './customMiddleware';

BR.Filters(
  'bluerain.redux.middlewares',
  function AddMiddleware(middlewares) {
    return middlewares.push(customMiddleware());
  }
);
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### ReactRouterPluginConfigs

This is the default configuration set
that is used at boot time.

#### Properties

- `androidBackButton` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** [default: true]            Listen for Android Back button on React Native. [Details](https://reacttraining.com/react-router/native/api/AndroidBackButton)
- `deepLinking` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** [default: false]                 Enable deep linking on react native. [Details](https://reacttraining.com/react-router/native/api/DeepLinking)
- `forceMemoryHistory` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** [default: false]          Force plugin to use memory history
- `historyConfigs` **object** [Configs object](https://github.com/ReactTraining/history) passed to the history constructor.

### ReactRouterPlugin

#### Extends Plugin

React Router (v4) plugin to add routing capabilities to BlueRain Apps.

#### **Properties**

- `pluginName` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** "ReactRouterPlugin"
- `slug` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** "router"

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