sails-hook-react-router

Bring the power of React Router to your SailsJS application. This configurable hook is designed for universal/isomorphic React applications, as the routes are handled both on the server and client.

Installation

NPM Install

npm install sails-hook-react-router --save

This project requires React >0.14 & React Router >1.0 (npm install react react-router --save)

Sails setup

Create a react config which at minimum returns the resolved path to your React Router exported routes, e.g:

// config/react.js
var path = require('path');
 
module.exports.react = {
  
  routes: path.resolve(__dirname, './../app/routes')
  
};
 

See below config API for the full set of options.

React Router setup

The routes file now simply needs to return a set of React Router routes. For more information, check the React Router documentation. An example of this file:

// app/routes.js
import React from 'react';
import { Route, Router, IndexRoute, browserHistory } from 'react-router';
 
import Layout from './layout';
import Home from './pages/home';
import Articles from './pages/articles';
import NotFound from './pages/404';
 
export default (
  <Router history={browserHistory}>
    <Route path="/" component={Layout}>
      <IndexRoute component={Home}  />
      <Route path="articles" component={Articles} />
      <Route path="*" component={NotFound} />
    </Route>
  </Router>
);

You now need to call the hooks clientRouter within your JavaScripts entry point to bootstrap the routes:

// app/index.js
import routes from './routes';
import clientRouter from 'sails-hook-react-router/lib/router/client';
 
 
clientRouter(
  routes, 
  {}, // additional props to pass to router
  // options - see clientRouter docs
  {
    reactRootElementId: 'react-root',
    isomorphicStyleLoader: true
  }
);

API

Config API

API	Description	Type	Default
routes	A resolved path to a file which exports a Router component	string
reloadOnWebpackBuild	Hot reload routes, sails controllers, services etc after every webpack build (only applies in DEV environment). Requires sails-hook-webpack to be installed.	boolean	true
isomorphicStyleLoader	If enabled, crtitical component styles will be rendered server side. This helps deal with FOUC issue on client side applications.	boolean	true
routingPreference	Which router takes preference on route loading. If two routes on Sails and React are identical, whichever is specified here will be loaded over the other.	string (react/sails)	react

clientRouter API

API	Description	Type	Default
reactRootElementId	The page DOM element ID which the app will be rendered to.	string	react-root
isomorphicStyleLoader	If enabled, components will be rendered with style loader.	boolean	true

The isomorphicStyleLoader must be the same value on both the Sails config and clientRouter - otherwise you'll experience a React invalid checksum warning.

License

MIT

Maintained By

• Mike Diarmid
• Elliot Hesp