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