React Router

React Router V4 and Redux integration.

Internally, uses react-router-dom for browser based apps and 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:

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

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

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, Native

Route

React Router's Route component.

More Info: Web, Native

RouterSwitch

React Router's Switch component.

More Info: Web, Native

Redirect

React Router's Redirect component.

More Info: Web, Native

RouterActions

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

<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
• location
• history

<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).

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.

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

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

API

ReactRouterPluginConfigs

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

Properties

• androidBackButton boolean [default: true] Listen for Android Back button on React Native. Details
• deepLinking boolean [default: false] Enable deep linking on react native. Details
• forceMemoryHistory boolean [default: false] Force plugin to use memory history
• historyConfigs object Configs object passed to the history constructor.

ReactRouterPlugin

Extends Plugin

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

Properties

• pluginName string "ReactRouterPlugin"
• slug string "router"