fluxible-plugin-react-router
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.

fluxible-plugin-react-router

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.

Setup

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

app.plug(ReactRouterPlugin())
// client.js

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

//...

const history = createBrowserHistory();
app.getPlugin('ReactRouterPlugin').setHistory(history);

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

  ReactDOM.render((
    <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:

ReactDOM.render((
  <Application context={context.getComponentContext()}>
    <Router history={history} routes={routes}/>
  </Application>
), 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)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (2)

Copyright 2014 - 2017 © taobao.org |