A fluxible plugin that provides react-router context to actions
Last updated 5 years ago by talon .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install fluxible-plugin-react-router 
SYNC missed versions from official npm registry.


A Fluxible plugin that provides react-router v1.0.0 history context to actions and components in isomorphic applications.

npm install fluxible-plugin-react-router 

Note: For react-router@0.13.x support use fluxible-plugin-react-router@1.1.0 to expose the router instance on the action context.

Note: If your app is not isomorphic and only runs in the browser the react-router example on Navigating Outside of Components might be a simpler solution.


The plugin should be registered with the Fluxible app and the history used to initialize the router client side set at the appropriate time using the setHistory(history) method:

// app.js

import Fluxible from 'fluxible'
import ReactRouterPlugin from 'fluxible-plugin-react-router';

const app = new Fluxible({
  component: require('./mainRoutes.jsx') // your routes component goes here

// client.js

import { Router } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';


const history = createBrowserHistory();

app.rehydrate(dehydratedState, (err, context) => {
  if (err) throw err;

    <Router history={history} routes={app.getComponent()}/>
  ), document.getElementById('reactAppElement'));
// server.js

// Rendering a static url, so the history is not used on 
// the server and needn't be set on the plugin. 

Details on server-side routing can be found in the relevant section of the react-router docs.

Using the History

The history will be available on the action context. See the history object API docs for details.

function someAction(actionContext, payload, done) {
  actionContext.history.pushState(null/*state*/, '/');

When using ES6 classes and the navigation mixins aren't available the history can also be made available on the component context if you provide the childContextType on a top-level component, likely using the type Fluxible provideContext() function/decorator:

import provideContext from 'fluxible-addons-react/provideContext';
import { PropTypes } from 'react-router';

class Application extends React.Component {
   render() {
     // ...

Application = provideContext(Application, {
  history: PropTypes.history

This Application component might be applied around the router when rendering:

  <Application context={context.getComponentContext()}>
    <Router history={history} routes={routes}/>
), document.getElementById('reactAppElement'));

Current Tags

  • 2.0.0                                ...           latest (5 years ago)

4 Versions

  • 2.0.0                                ...           5 years ago
  • 1.1.0                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
Dev Dependencies (0)
Dependents (2)

Copyright 2014 - 2017 © taobao.org |