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.
npm install sails-hook-react-router --save
This project requires React >0.14 & React Router >1.0 (
npm install react react-router --save)
react config which at minimum returns the resolved path to your React Router exported routes, e.g:
// config/react.jsvar path = ;moduleexportsreact =routes: path;
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;;;;;;<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
|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|
|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|
isomorphicStyleLoadermust be the same value on both the Sails config and clientRouter - otherwise you'll experience a React invalid checksum warning.