aymericbouzy / react-router-rails

React Router for Rails asset pipeline

react-router-rails

React Router for Rails asset pipeline

• React Router version: 0.13.3

Installation

1. Add to your Gemfile and install with bundler:

gem 'react-router-rails', '~>0.13.3.2'

bundle install

2. Require the modified React-Router javascript file in app/assets/javascripts/application.js:

//= require react_router
// OR
//= require react_router.min

//Optional. Gives you the ability to use the view helper in your template
//= require react_router_ujs

Or in app/assets/javascripts/application.js.coffee:

#= require react_router
#OR
#= require react_router.min

#Optional. Gives you the ability to use the view helper in your template
#= require react_router_ujs

3. Using the view helper:

Define your routes 'MyRoutes' in your react components folder, like you would normally do:

var Route = ReactRouter.Route;

this.MyRoutes = (
  <Route handler={App}>
    <Route name='home' handler={Home} path='/' />
    ...
  </Route>
);

In the view helper set the name of your routes component

<%= react_router 'MyRoutes' %>

Optionally set the location handler (defaults to HashLocation):

<%= react_router 'MyRoutes', 'HistoryLocation' %>

If you use server rendering:

<%= react_router 'MyRoutes', 'HistoryLocation', {}, { prerender_location: path_to_route } %>

4. Require your components folder AFTER your react_router:

    #= require react_router
    #= require components
   

5. Using React Router in your javascript :

ReactRouter.run(routes, function (Handler) {
  ReactDOM.render(<Handler/>, document.body);
});

Or in coffeescript:

ReactRouter.run(routes, (Handler) ->
  ReactDOM.render <Handler/>, document.body
)

Roadmap

1. Better handle of production version

Instead of explicit require minified version, we should make it possible to configure that in the environment config files like the react-rails configuration (ex. config.react_router_variant = :production)

Acknowledgements

This gem is highly inspired and based on React Rails code. Thanks!

A big thanks to @troter who implemented the server-side rendering engine for this gem.

React Router by Ryan Florence, Michael Jackson licensed under the MIT license

Copyright Mario Peixoto, released under the MIT license.