Allow partial declaration of routes

[abergs]

Very useful for when you want to split your routes into different sections:

var ContactsRoutes = require("contactRoutes");
...
<Routes>
    <Route path="/" handler={home}>
        {ContactsRoutes}        
        {BookingRoutes}
        {ItemsRoutes}
    </Route>    
  </Routes>

Currently, the above solution works, but only as long as you only have one <Route> with nested child routes within your required Routesmodules (e.g. ContactsRoutes).

It doesn't work if I have multiple routes inside of ContactsRoutes, which are not nested, because of JSX not allowing multiple adjacent components.

My suggestion is to reuse <Routes> as a container (with no additional behavior).

[mtscout6]

+1 As my initial stab at #190 showed I originally assumed that I could build up a component that only housed routes. I'd much rather see something like:

var ContactsRoutes = require("contactRoutes");
...
<Routes>
    <Route path="/" handler={home}>
        <ContactsRoutes />   
        <BookingRoutes />
        <ItemsRoutes />
    </Route>    
  </Routes>

[abergs]

Yes that would be even nicer.

[ryanflorence]

Its just JSX, return an array:

var someRoutes = function() {
  return [<Route/>, <Route/>];
}

[abergs]

Cool, didn't know about that trick! Thank you.

Skickat från min Windows Phone

---

Från: Ryan Florence
Skickat: 2014-08-12 23:10
Till: rackt/react-router
Kopia: Anders Åberg
Ämne: Re: [react-router] Allow partial declaration of routes (#193)

Its just JSX, return an array:

var someRoutes = function() {
  return [<Route/>, <Route/>];
}

---

Reply to this email directly or view it on GitHub:
#193 (comment)

[abergs]

I can't get this to work, perhaps I am missing something? when packing the routes in an array the router throws an exception here:

function findMatches(path, route) {
  var children = route.props.children, matches;

because route is an array.

This is the code:

var someRoutes = function() { return [<Route />, <Route />]; };

var app = (
<Routes>
    <Route path="/" handler={home}>
        <someRoutes />
    </Route>
</Routes>

Either the findMatches could unpack to route component or I guess it would be possible (but not so nice) to write some unpacking code on someRoutes before inserting it into <Routes>

Am I missing something?

[mtscout6]

The problem there is that although JSX would properly transform <someRoutes /> to someRoutes() React is expecting the return result to be a single React component or null.

If you changed it to {someRoutes()} it should work. I know that sounds counter-intuitive, but the difference is where the function is actually getting invoked. When you invoke it you are sending React an array of component constructors, and React knows how to handle that. When you let React do it, it is expecting a React component constructor function, not just any old function.

[abergs]

I tried that, and I get the error Cannot read property 'children' of undefined in findMatches

[mtscout6]

Ah, I scrolled down to far and didn't see the beginning of your question. Sorry about that.

[mtscout6]

The way I'm currently doing it is:

var someRoutes = (
  <Route ...>
    <Route ... />
    <Route ... />
  </Route>
);

var app = (
<Routes>
    <Route path="/" handler={home}>
        {someRoutes}
    </Route>
</Routes>

Have you tried removing the function wrapper and just assigning an array. Something like:

var someRoutes = [<Route />, <Route />];

var app = (
<Routes>
    <Route path="/" handler={home}>
        {someRoutes}
    </Route>
</Routes>

[abergs]

Yes, that doesn't work either unfortunately.. (the same error message as above)
This is what the transformed JSX looks like:

var someRoutes =  [
        Route({name: "booking", handler: home}, 
            Route({name: "booking/quickEdit", path: "/booking/quickEdit/:bookingId", handler: home, defaultLeaveRoute: "booking"})
        ),
        Route({name: "booking/contacts", handler: home}, 
                Route({name: "booking/contact", path: "/booking/contacts/:contactId", handler: home})
        )
        ];
 application = (
     Routes(null, 
        Route({path: "/", handler: home}, 
            Route({name: "start", handler: Start}), 
            someRoutes
        )
      )
    );

[ryanflorence]

/** @jsx React.DOM */
var Router = require('react-router');
var Routes = Router.Routes
var Route = Router.Route;

var moreRoutes = function() {
  return [
    <Route name="foo" handler={require('../components/foo')} />,
    <Route name="bar" path="/what/evz" handler={require('../components/bar')} />,
    <Route name="index" path="/" handler={require('../components/index')} />
  ]
}

module.exports = (
  <Routes>
    <Route location="history" handler={require('../components/app')}>
      {moreRoutes()}
    </Route>
  </Routes>
);

Works in the rackt/react-boilerplate app.

[abergs]

Aha! So I tried your example @rpflorence and ofcourse it worked. I dig some fast digging and the problem is when you combine "packaged" routes and "local", like this:

<Route location="history" handler={require('../components/app')}>
  {moreRoutes()}
  <Route name="whatever" ... />
</Route>

Which I guess doesn't let react unpack the array because the children is now a sort of nested array. The solution is simply to not mix an array together with a lone <Route>

And just to clear things up, it doesn't matter if it is a function or a array.

[abergs]

Perhaps issuing a warning/error if the RouteComponent detects one of it's children to be an array, I can't be the only newcomer to run into this invisible wall, no? 👊

[ryanflorence]

This is all just JSX, isn't it? Is the router getting in the way?

On Wed, Aug 13, 2014 at 8:21 AM, Anders Åberg [email protected]
wrote:

Perhaps issuing a warning/error if the RouteComponent detects one of it's
children to be an array, I can't be the only newcomer to run into this
invisible wall, no? [image: 👊]

—
Reply to this email directly or view it on GitHub
#193 (comment).

[abergs]

Actually react seems to handle this differently (??)

Because this renders fine:

var application = React.createClass({
    render: function () {
            var other = [
                <button>2</button>,
                <button>3</button>
            ];

        return (
            <div>
            <button>1</button>
            {other}
            </div>
            );
    }
});

[ryanflorence]

I don't mean to be a grump, but I don't see myself spending any time
getting this use-case to work, I don't like the idea of splitting up my
route configs like this. But if you want to take the time to make it work,
I would happily merge the pull request :)

On Wed, Aug 13, 2014 at 8:41 AM, Anders Åberg [email protected]
wrote:

Actually react seems to handle this differently (??)

Because this renders fine:

var application = React.createClass({
render: function () {
var other = [
2,
3
];

return (
    <div>
    <button>1</button>
    {other}
    </div>
    );

}

});

—
Reply to this email directly or view it on GitHub
#193 (comment).

[abergs]

No problem @rpflorence, sorry for being all over you in the /issues. I will happily create a PR.Thanks for all your time and help tracking this down, @rpflorence and @mtscout6

[mtscout6]

@rpflorence I understand your reluctance to fix this bug yourself, but may I suggest that the issue remain open or open a new issue. It may even make sense to rename it to more adequately reflect this bug. This is now a known issue that should get resolved at some point, and again I'm not saying that you have to do so. My main motivation for this would be that first it is not forgotten about. Second so that follow on users that also have this problem would see that it is already a known issue.

[ryanflorence]

woops, meant to reopen! thanks.

[mjackson]

This sounds like something that should be handled by React.Children.forEach, which we're using to iterate over the route config. Seems like if it knew how to handle child arrays, we wouldn't be having this problem.

@spicyj Can you confirm/deny?

[abergs]

@mjackson I did an console.log(route) at the top of registerRoute which seemed to identify everything as OK.

The problem is visible first in findMatch, but that seems to be a bad place to do the extra isArray check. Had to cancel the work on this for the evening but will continue tomorrow.

[mjackson]

@abergs Ah, thank you. Sounds like that's the right place to fix the bug.

[mjackson]

Just to clarify, the only reason I'm not using React.Children.forEach inside findMatch is because I need it to be cancellable. In other words, I need to break early once the match is found. We need a more robust React.Children.find or something.

[abergs]

Oh, didn't see that you did work as well @mjackson. I did a small change to allow nested arrays of routes, my examples worked good with it. Seems like you did that also, as well as some more work with <DefaultRoute>.

Perhaps we did similar work? :)