Multiple routers on the same page?

[hakanderyal]

Is there a way to have multiple routers on the same page, like react-router-component (http://andreypopp.viewdocs.io/react-router-component/multiple)?

Lets say I have a sidebar and a main content area on the same page, how can I have both of them to render a different react component based on the route?

[ryanflorence]

It's a different model:

var App = React.createClass({
  render: function() {
    return (
      <div>
        <MainSidebar/>
        <MainContent/>
      </div>
    )
  }
});

var User = React.createClass({
  render: function() {
    return (
      <div>
        <UserSidebar/>
        <UserContent/>
      </div>
    )
  }
});

var routes = (
  <Routes>
    <Route path="/" handler={Main} />
    <Route name="user" path="users/:userId" handler={User}/>
  </Routes>
);

[tcoopman]

I think it would be nice if something like this was possible:

<Routes>
  <Route name="main" handler={Main} />
    <Route name="user" handler={{main: User, sidebar: UserSidebar}} />
  </Route>
</Routes


var Main = React.createClass({
  render: function() {
    return (
      <div>
        <this.props.activeRouteHandler[sidebar] />
        <this.props.activeRouteHandler[main] />
      </div>
    )
  }
});
....

[ryanflorence]

Interesting, these are equivalent to ember's named outlets.

Maybe handlers and handler to be more explicit.

Sent from my iPhone

On Aug 31, 2014, at 11:06 AM, Thomas Coopman [email protected] wrote:

I think it would be nice if something like this was possible:

var Main = React.createClass({
render: function() {
return (

<this.props.activeRouteHandler[sidebar] />
<this.props.activeRouteHandler[main] />

)
}
});
....

—
Reply to this email directly or view it on GitHub.

[tcoopman]

@rpflorence that would be nice 👍

[agundermann]

Can't you already achieve the same with something like

// Routes
<Routes>
    <Route name="main" handler={Main}>
        <Route name="user" sidebarHandler={SidebarUser} handler={User} />
    </Route>
</Routes>

// Main
var Main = React.createClass({
    render: function(){
        var routeHandler = this.props.activeRouteHandler();
        var sidebarHandler = routeHandler.props.sidebarHandler();
        return <div>
            {sidebarHandler}
            {routeHandler}
        </div>;
    }
});

or is that bad practice?

Also, multiple handlers would only work with routes that have no children, wouldn't they?

[ryanflorence]

It certainly gets weird, but I think it's worth exploring. A feature like this would probably kill many requests to know all the router internal data.

Sent from my iPhone

On Aug 31, 2014, at 12:09 PM, Alexander Gundermann [email protected] wrote:

Can't you already achieve the same with something like

// Routes

// Main
var Main = React.createClass({
render: function(){
var routeHandler = this.props.activeRouteHandler();
var sidebarHandler = routeHandler.props.sidebarHandler();
return

{sidebarHandler}
{routeHandler}

;
}
});
Also, multiple handlers would only work with routes that have no children, wouldn't it?

—
Reply to this email directly or view it on GitHub.

[ryanflorence]

taurose, that's actually pretty slick, can't think of gotchas at first glance.

[mjackson]

@taurose In your example SidebarUser will not get the special ref, params, and query props that User gets because this.props.activeRouteHandler !== User. Instead, this.props.activeRouteHandler is actually a custom function that already binds the ref, params, and query so that they don't need to be manually passed in from the parent.

Of course, these props are still available in this.props.params, etc. so you could pass them to SidebarUser manually. But the two methods are not equivalent.

[mkotsbak]

See also how this is possible in scalajs-react: https://github.com/japgolly/scalajs-react/blob/master/extra/ROUTER2.md#nested-routes-modules

[alecmev]

In case anybody stumbles into this issue, looking for a way to have multiple components per route (simply put), check this sidebar example (found here).

[nuclearspike]

I accomplish this behavior using RouteHandlers. I have a dashboard with navs down the side, then when you click one, it fills in the main area with a list and a RouteHandler, when you select one, it populates the details. Think of gmail: select folder, then message from the list then it shows the message. Only one Router. You can do this already.

[larsnystrom]

I'm currently migrating an old backbone app to react. To do that I have to render react components at different places in the backbone views, so there are multiple ReactDOM.render() calls per page.

Unless there's a way to render the <Router> component multiple times I won't be able to incorporate react-router until I've migrated the entire codebase to a single page react app. Being able to render the router multiple times would make the migration go so much smoother. The end game would still be a single ReactDOM.render() call (and thus only one router element) but I just can't do that yet.

Is rendering multiple routers something react-router might support in the future?

[timdorr]

You can do this with multiple memory history instances.

[MichaelArnoldOwens]

var routes = (
  <Routes>
    <Route path="/" handler={Main} />
    <Route name="user" path="users/:userId" handler={User}/>
  </Routes>
);

What is ? How is it different from ? Cannot find it in the docs: https://github.com/ReactTraining/react-router/blob/master/docs/API.md