sails-hook-react-router v0.1.5

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

clientRouter API

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