Nitrogen Poisonous Monoxide

    sails-hook-react-router

    0.1.5 • Public • Published

    sails-hook-react-router

    NPM version Build status Dependency Status

    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

    Install

    npm i sails-hook-react-router

    DownloadsWeekly Downloads

    1

    Version

    0.1.5

    License

    MIT

    Last publish

    Collaborators

    • salakar