Attempting to use React-Router #472

Activity

1. murtali commented on Mar 3, 2016

   

   murtali

   on Mar 3, 2016

   More actions

   having trouble rendering the routers from rails as well. how were you able to render via render_component?
2. nguyenmv2 commented on Apr 5, 2016

   

   nguyenmv2

   on Apr 5, 2016

   More actions

   Do you have in your App component ? I do believe that's where the components of the route are generated
3. jamby commented on Apr 5, 2016

   

   jamby

   on Apr 5, 2016

   Author

   More actions

   Sadly since this is inside rails, there's no App component. I have specific features that have the mother "system" component, but no App component that encompasses everything if that's what you mean?
4. nguyenmv2 commented on Apr 5, 2016

   

   nguyenmv2

   on Apr 5, 2016

   More actions

   I'm a complete newbie in this as well, but if you can humor me with this attempt. Try setting the root path as DefaultRoute, then create an App component that returns only
5. huy-thp commented on Oct 14, 2016

   

   huy-thp

   on Oct 14, 2016

   Last edited by huy-thp

   More actions

   I've made React-router work with this gem. Here is my solution:

   1. Download the React-router library https://unpkg.com/react-router/umd/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;
   

   1. Add the react_component helper into your view, says the component is ReactHome, this will render the Router component
      <%= react_component 'ReactHome' %>
   2. Add the jsx code for Router, in this code you can add the actual React component

   var ReactHome = React.createClass({
     render() {
       return (
         <Router>
           <Route path="/" component={your_react_component}>
           </Route>
         </Router>
       );
     }
   });
   

   Good luck. The only problem I got is when the page renders a React component, react-rails-hot-loader doesn't work within that component, it works with child components

   👍React with 👍1Reacted by Seoung Ho Jeong
6. rmosolgo commented on Dec 9, 2016

   

   rmosolgo

   on Dec 9, 2016

   Contributor

   More actions

   Thanks for sharing your solution! I hope it works for others, too!
7. rmosolgo

   closed this as completedon Dec 9, 2016
8. Kario commented on May 10, 2017

   

   Kario

   on May 10, 2017

   More actions

   Hi, Thanks for sharing the solution, I got this working on my existing rails app. I cant seem to get it to work on pre-rendering though, it keeps giving me the error:
   #<ExecJS::ProgramError: TypeError: Cannot read property 'getCurrentLocation' of undefined>

   Google shows this to be that it cant find the history for the Router, which are defined in the js assets:
   var hashHistory = ReactRouter.hashHistory;
   var browserHistory = ReactRouter.browserHistory;

   I tried putting these in the server_rendering.js along with react router include, but it still throws the same error. I attempted to put the components after the declaration of the vars, but then the server renderer couldnt find my components... I cant seem to figure out how to debug ExecJS, but it seems to me there is some kind of error with the definitions causing the whole process to fail...

   Has anyone gotten router to work on pre-render?
9. Sporky023 commented on May 19, 2017

   

   Sporky023

   on May 19, 2017

   More actions

   Thanks @origamih.

   Latest version of react-router on unpkg has a new url format: https://unpkg.com/react-router@4.1.1/umd/react-router.js
10. eveevans commented on Aug 30, 2017

    

    eveevans

    on Aug 30, 2017

    More actions

    For react-router-dom 4.x
    You should change the var, for the new equivalents

    var Router        = ReactRouterDOM.BrowserRouter;
    var Route         = ReactRouterDOM.Route;
    var Link          = ReactRouterDOM.Link;
    var HashRouter    = ReactRouterDOM.HashRouter;
    var Switch        = ReactRouterDOM.Switch;
    var StaticRouter  = ReactRouterDOM.StaticRouter;
    var Redirect      = ReactRouterDOM.Redirect;
    var Prompt        = ReactRouterDOM.Prompt;
    var NavLink       = ReactRouterDOM.NavLink;
    var withRouter    = ReactRouterDOM.withRouter;
    var match         = ReactRouterDOM.matchPath;
    

    (I'm guesing this is not the complete list, but you get the idea)

    👍React with 👍2Reacted by Greg Myers and Eric Stensland
11. Kastrcn commented on Nov 7, 2018

    

    Kastrcn

    on Nov 7, 2018

    More actions

    how to ssr?
12. ziaulrehman40 commented on Nov 10, 2019

    

    ziaulrehman40

    on Nov 10, 2019

    More actions

    I know this is old issue, but i am trying to wrap my head around similar issue, I am struggling to connect wires in rails router to forward requests to frontend router, and to make it not look like whole page is loading.
    I tried a solution to create a controller action, have it render main App.js component and put a line in routes.rb to let it know that all requests except some would go to this action to render front-end app. but this still makes server request and makes react router kind of useless because whole page loads.