Skip to content
Seoung Ho Jeong edited this page Apr 14, 2017 · 4 revisions

How to use react router in react-rails?

solution of origamih from this issue

  1. Download the React-router library https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.5/ReactRouter.min.js
    Put it in vendor/assets/javascripts, require it in application.js
    Or you can put it in app/assets/javascript (no need to require)
  2. Define the essential React-router variables some where in those javascript asset files.
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var IndexRoute = ReactRouter.IndexRoute;
var IndexLink = ReactRouter.IndexLink;
var IndexRedirect = ReactRouter.IndexRedirect;
var hashHistory = ReactRouter.hashHistory;
var browserHistory = ReactRouter.browserHistory;
  1. Add the react_component helper into your view, says the component is ReactHome, this will render the Router component
<%= react_component 'ReactHome' %>
  1. Add the jsx code for Router, in this code you can add the actual React component
var ReactHome = React.createClass({
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={your_react_component}>
        </Route>
      </Router>
    );
  }
});