mariopeixoto / react-router-rails

React Router for Rails asset pipeline

Important: This gem is not maintained anymore, and it's only compatible up to Rails 4.

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 :

```js
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.

react-router-rails's Issues

Uncaught ReferenceError: <Component> is not defined

If I try to pass a component in via a route, such as the AnotherPage component you have set up in the sample project, I get the error above.

The above error goes away if I do a //= require_tree ./ inside of the actual routes file, though: https://github.com/mariopeixoto/react-router-rails/blob/master/examples/react-router-example/app/assets/javascripts/components/routes.js.jsx

It seems that the router doesn't have access to the component definition because of how the asset pipeline orders things? Is there a better way to fix this?

Issues getting started

Hi, first of all, thank you for this gem! I am unable to get started with the code provided. My MyRoutes.jsx is in this gist :

https://gist.github.com/tgoldenberg/e18a6387576e431585d0

If I use the plain 'routes' variable in the example, I get an error because it isn't defined. Can you provide some starting instructions that are more explicit and clear?
Thank you.

Server side rendering

Is the server-side rendering actually working with your tool ?
I'm expecting so far to still have react_component('HelloMessage', {name: 'John'}, {prerender: true}) provided by react-rails

I've so far set things correctly, but from your readme, I might not get everything
I obviously dont know how to "require" the router when prerendering

Thanks for your hints (:

Issue when deploying to heroku

After deploying to heroku I got the following error even though it works perfectly locally:

ActionView::Template::Error: Encountered error "ReferenceError: PricingRoutes is not defined" when prerendering PricingRoutes with /pricing and {}

Have you seen anything similar?

Router + Fluxxor

Run router in js with flux params
var flux = new Fluxxor.Flux(...);
Router.run(routes, function(Handler) { React.render( <Handler flux={flux} />, document.getElementById("app") );});

Question:
How pass _flux_ in view helper?
Thanks in advance

really want to use this

but at this point the prerender_location feature is too sparsely documented. I played around with it for a day, but I could never get it to fully route. I created:

app/assets/javascripts/components/routes.js.jsx

var Route = ReactRouter.Route;
this.DDSRoutes = (
  <Route handler={App} path='/'>
    <Route name='splash' handler={Splash} path='splash' />
  </Route>
);

app/assets/javascripts/components/app.js.jsx

var App = React.createClass({
  render: function() {
    return (
      <div>
        <h1>App {this.props.foo}</h1>
        <ReactRouter.RouteHandler/>
      </div>
    )
  }
});

app/assets/javascripts/components/splash.js.jsx

var Splash = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Splash Page</h1>
      </div>
    )
  }
});

app/controllers/front_end_controller.rb

class FrontEndController < ApplicationController
  def index
  end
end

app/views/front_end/index.html

<%= react_router 'DDSRoutes', 'HistoryLocation', {foo: 'this is foo prop'}, { prerender_location: '/' } %>

Rails.application.routes.draw do
  root 'front_end#index'
  get "/*path" => "front_end#index"
end

I can get the base App to mount at '/', but then I get many Undefined errors:
routes.self: Undefined Object 'ReactRouter' at the first line, e.g. var Route = ReactRouter.Route;

and I can never get it present Splash at '/splash'

I am using the latest version released june 20 (0.13.3) I get that this is bleeding edge, and I really hope it stabilizes. If I am doing something wrong, let me know.

Please use ReactDom.render when server rendering

When react-rails version is 1.4.1, warning message shows up in chrome developer console like below.

React.render is deprecated. Please use ReactDOM.render from require('react-dom') instead.

I guess react-router-rails use React.render method.

Could you update for react-rails ver 1.4.1?

Improve server rendering documentation

The server rendering documentation is pretty bad right now.
It needs to be improved.

Update to React-Router 1.0

React Router has launched the 1.0 version.

Using prerender_location in Javascript

I'm using react-router-rails with fluxxor. Since I need to pass in the flux instance, I cannot do a server-side rendering with your view helper. But I run into trouble when I use the back button if I don't use prerender_location. Is there a way I can incorporate prerender_location into ReactRouter.run?

Example does not work on Rails 5 and updated react-rails

Made a test on Rails 5 and react-rails and apparently the example does not work.

Output was:

784: unexpected token at 'Warning: You are manually calling a React.PropTypes validation function for the name prop on UnknownComponent. This is deprecated and will not work in production with the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.
Warning: You are manually calling a React.PropTypes validation function for the path prop on UnknownComponent. This is deprecated and will not work in production with the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.
Warning: You are manually calling a React.PropTypes validation function for the handler prop on UnknownComponent. This is deprecated and will not work in production with the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.
Warning: You are manually calling a React.PropTypes validation function for the ignoreScrollBehavior prop on UnknownComponent. This is deprecated and will not work in production with the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.
["err","TypeError: Object # has no method 'renderToString'","TypeError: Object # has no method 'renderToString'\n at Function.eval (eval at (/tmp/execjs20161218-26269-1p4p13gjs:24944:8), :4:27)\n at Function.dispatchHandler (/tmp/execjs20161218-26269-1p4p13gjs:23382:23)\n at /tmp/execjs20161218-26269-1p4p13gjs:23350:30\n at /tmp/execjs20161218-26269-1p4p13gjs:24015:10\n at /tmp/execjs20161218-26269-1p4p13gjs:24015:10\n at Function.Transition.to (/tmp/execjs20161218-26269-1p4p13gjs:24018:16)\n at /tmp/execjs20161218-26269-1p4p13gjs:23349:23\n at Function.Transition.from (/tmp/execjs20161218-26269-1p4p13gjs:23997:16)\n at Function.dispatch (/tmp/execjs20161218-26269-1p4p13gjs:23346:21)\n at Function.refresh (/tmp/execjs20161218-26269-1p4p13gjs:23397:17)"]'
Extracted source (around line #1):
1

<%= react_router 'MyRoutes', 'HistoryLocation', { foo: 'Foo' }, { prerender_location: @location_path } %>

Asset Precompilation for Production ENV

When deploying to production rake is aborting. Do you have any ideas as to why this is happening?

RAILS_ENV=production rake assets:precompile --trace

rake aborted!
NoMethodError: undefined method `resolve' for nil:NilClass
/Users/kgreeff/.rvm/gems/ruby-2.2.2/gems/react-router-rails-0.13.3.2/lib/react/router/rails/railtie.rb:11:in `block in <class:Railtie>'

pass properties using the react_router view helper

Can you make an example that passes initial properties to the rendered route. I am pretty sure this worked in a previous version of this code like:

<%= react_router 'MyRoutes', 'HistoryLocation', {'foo' => 'foo'}, { prerender_location: @location_path } %>

which would allow me to do the following in app/assets/javascript/components/app.js.jsx

/** @jsx React.DOM */

var RouteHandler = ReactRouter.RouteHandler,
    Link = ReactRouter.Link;

var App = React.createClass({
  render: function() {
    return (
      <div>
        <nav>
          <ul>
            <li>
              <Link to='/'>Hello World</Link>
            </li>
            <li>
              <Link to='/page1'>Another Page</Link>
            </li>
          </ul>
        </nav>
        <p>foo: {this.props.foo}</p>
        <RouteHandler />
      </div>
    );
  }
});

Router render <noscript> in client?

Router is rendered like this:

<div data-react-router-class="MyRoutes" data-react-router-location="HistoryLocation" data-react-router-data="...">
        <noscript data-reactid=".0"></noscript>
</div>

Where am I go wrong?

pass current_user to MyRoutes

How would I pass in my current_user.to_json in my <%= react_router "MyRoutes" %>

I tried to pass it in as <%= react_router "MyRoutes", @DaTa %>, but it wasn't showing up in my React components.

Any thoughts?

Turbolinks 5 events not supported in react_router_ujs?

The handleTurbolinksEvents function of the UJS library is listening to page:change, which is now turbolinks:load or related.

Cannot require react-router-rails in plugin engine

I'm writing a little CMS plugin and I decided to use React.js for frontend. Thus I added react-rails and react-router-rails to my .gemspec file. Here it is:

    s.add_dependency "react-rails"
    s.add_dependency "react-router-rails"

And then in my engine.rb:

    require 'react-rails'
    require 'react-router-rails'

But when I try to do anything -- for example, create a model, it returns me the following error:

    /home/alex/Desktop/WORKSPACE/rails/multiflora/lib/multiflora/engine.rb:5:in `require': cannot load such file -- react_router_rails (LoadError)

Have I done something wrong or this gem isn't supposed to be used in plugins?

React.render deprecated

Hey, So i was trying this out and I encountered an error :
React.render is deprecated. Please use ReactDOM.render from require('react-dom') instead.

seems like the code is still using the old render.

customize links

Hi, there!
Can you tell me how I can add classes or ids to my React-links?
I mean, can I add class to <Route handler={AnotherPage} path='page1'/> for example?

Example code not enough to get running

I was unable with the given examples to get this to work with a fresh rails app
https://www.dropbox.com/s/j1btljuh3tm0vnu/Screenshot%202015-05-21%2013.48.15.png?dl=0

my routes.jsx

var Route = ReactRouter.Route;
var DefaultRoute = ReactRouter.DefaultRoute;

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

I am using

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

in my application.html

Definitely seams like some sort of route needs to be done in the rails routes file.

prerendering?

What do you have to do to get prerendering to find the route?

Currently we have a custom setup on the v8 engine.

I tried setting window.location = {pathname: "....", search: "..."}

but that doesn't work.

The router mounts, but it never renders.

Client side everything works fine.

Prefetching data

Hi,
coming from rails to react and getting deeper into this new thing, I'm right now a bit deceived, or at least trying to see a specific point more clearly

Isomorph all the things !

Thing is, those trillions of tutorials, boilerplates, starterkits… None of those really talks about how to handle data correctly on the server side. I'm mean, fetching data before rendering — while keeping the fetches setups within the components, which would obviously be the clear advantage of what react would provide.

There's this mystical nexus-react, there are some very few others that talks about this. Fluxible and its chat app shows you how to use the "dangerouslySetInnerHTML" method…

There might be a way to cleanly handle it, you might have a rails approach to it, which I did not noticed yet. At least to have your opinion about it

Prerendering can't find the variable

Hi, I'm trying to use prerender but this cant find my routes variable.

Error:

Encountered error "ReferenceError: Can't find variable: AppRoutes" when prerendering AppRoutes with /about and {}

In the view:

<%= react_router 'AppRoutes', 'HistoryLocation', {}, { prerender_location: '/about' } %>

let Router = ReactRouter;
let Route = Router.Route;
let NotFoundRoute = Router.NotFoundRoute;
let DefaultRoute = Router.DefaultRoute;

this.AppRoutes = (
  <Route handler={App}>
    <DefaultRoute handler={Home}/>
    <Route path='about' handler={About}/>
    <NotFoundRoute handler={NotFound}/>
  </Route>
);

Router.run(AppRoutes, Router.HistoryLocation, (Root) => {
  React.render(<Root/>, document.getElementById('app'));
});

Without use prerender, just <%= react_router 'AppRoutes', 'HistoryLocation', {} %>, everything works fine.