0

I have a React application where main.js calls app.js--which acts as a parent component--as can be seen here:

React.render(<APP />, document.getElementById("main"));

Now I need to set up React Router so that app.js will handle routing within the app.

Present setup

To set up my routes I have created routes.js, which contains the following code:

var Router = require('react-router');
var Route = Router.Route;

var routes = (
  <Route handler={App}>
    <Route path="/" handler={home}/>
  </Route>
);

module.exports = routes;

In app.js I imported routes and added RouteHandler as in the documentation:

var React = require('react');
var Router = require('../routes.js');
var RouteHandler = Router.RouteHandler;

var APP = React.createClass({
  render: function() {
    return (
      <RouteHandler/>
    );
  }
});

module.exports = APP;

I am having trouble understanding this code in the documentation:

Router.run(routes, Router.HashLocation, (Root) => {
  React.render(<Root/>, document.body);
});

Since I have already called the <app /> component from within the main component I want to handle all of the routing in the app component. I think the above code is transferring handler={component_to_render} through Root. But how do I configure my code in app.js to transfer the route to <RouteHandler/>?

My whole setup might be wrong, so any guidance will be appreciated.

Community
  • 1
  • 1
rosnk
  • 1,068
  • 1
  • 14
  • 36
  • It should works, what's the problem ? The syntax you do not understand is a ES6 syntax called [ArrowFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), it's a shortcut for writing `function(Root){ return React.render(, document.body) })` – Pierre Criulanscy Aug 28 '15 at 08:34
  • i am rendering "app" component from "main component", i intend to use route in "main" component but not in "app" component. To explain further, i intend all of the route to effect "main" component and render new component according to what ever route is passed. For example, if this route is triggered , i want to load "home" component in "main.js. Now i am not sure where Router.run.... code goes and i do not intend to use React.render(, document.body) inside Router.run function, i just need to effect app.js from what ever route is triggered in routes.js – rosnk Aug 28 '15 at 11:49
  • This is not a complete answer, but I noticed a problem: you are importing `routes.js` as React Router rather than importing the actual React Router in `app.js`. You need to `require` React Router and the routes independently: `var Router = require('react-router')` and `var routes = require('../routes.js');`. – Bart Riordan Sep 30 '15 at 23:38

1 Answers1

0

Since Router has to know which component to render, it has to be the root component. So instead of writing...

React.render(<APP />, document.getElementById("main"));

...just write that :

Router.run(routes, Router.HashLocation, (Root) => {
  React.render(<Root/>, document.getElementById("main"));
});

When some user hits the "/" url, the <Root/> node will render your APP handler which in turns will render your HomeComponent.

Pierre Criulanscy
  • 8,726
  • 3
  • 24
  • 38
  • what if i am using 'React.render(, document.getElementById("main"));' in main.js to render app component in app.js and now i want to render /(root) or whatever route inside app.js but not main.js. I have inside app.js but now how do i listen to URL and render component inside app.js. And also i can not use this code to listen to url as this code has [ document.getElementById("main")); ] code: Router.run(routes, Router.HashLocation, (Root) => { React.render(, document.getElementById("main")); }); – rosnk Aug 28 '15 at 13:15
  • For example, let's say you have a "public" app and a "admin" app so you want different route for both, that's the kind of think you're looking for ? – Pierre Criulanscy Aug 28 '15 at 13:30