rwr-react-router

rwr-react_router

react-router integration plugin for react_webpack_rails.

This integration makes it possible to render previously created router in rails view.

Setup

• Add rwr-react_router to your Gemfile:

gem 'rwr-react_router'

• Install rwr-react-router package:

$ npm install --save rwr-react-router

Usage

• Make sure that you have react-router installed.
• Import RWRReactRouter in your index.js file:

import RWRReactRouter from 'rwr-react-router';

• Register integration in RWR using RWR's IntegrationsManager manager:

import { integrationsManager } from 'react-webpack-rails';
integrationsManager.register('react-router', RWRReactRouter.integrationWrapper);

• Register one of your routers:

RWRReactRouter.register('MyRouter', MyRouter);

• In chosen view, render your router:

<%= react_router('MyRouter') %>

Passing props to router.

RWRReactRouter.register accepts both - react-router instance and function. When registering function instead of react-router instance, integration will take props (if any were passed to react_router helper) and will pass them to given function as first argument. This way you can pass them down to router of you choice:

function RouterWithProps(props) {
  return (
    <Router history={browserHistory}>
      <Route path="/with_props" component={App} yourName={props}>
        <Route path="about" component={About}/>
        <Route path="home" component={Home}/>
      </Route>
    </Router>
  );
}

Props passed to route will be available under props.route.yourName.

Server side rendering.

To make router work server-side it need to work on browserHistory. Otherwise, rails don't have access to current route in request. This can be achieved by adding wildcard route to rails routes:

get '/server_side/' => 'pages#server_side'
get '/server_side/*path' => 'pages#server_side'

and setting browserHistory for router:

<Router history={browserHistory}>
  <Route path="/server_side" component={App}>
    ...
  </Route>
</Router>

note: react router will analyze whole path so don't forget to add rails path part to it.

With valid setup simply enable server side by passing server_side: true flag in options:

<%= react_router('MyRouter', { foo: :bar }, server_side: true) %>

note: rwr-react_router automatically handles matching, redirects and routing errors. Redirects and 404's are passed to Rails and handled there so you will be redirect or get 404 page like in normal Rails app.

Contributing

Issues

Found a bug in rwr-react_router? Open an issue on GitHub Issues.

Pull requests

Interested in contributing to rwr-react_router? That's great, and thank you for your interest!

After checking out the repo, run bundle exec rake setup:all to install every environment dependencies.

To get your contributions accepted, make sure:

• All the tests pass. Run bundle exec rake test:all.
• Any new code paths you've added are covered by tests.
• Describe your changes in pull request (what it adds, how to migrate from previous version etc.)

License

The gem is available as open source under the terms of the MIT License.