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 notifications@github.com
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).