React-router: When route path matches getChildRoutes should be called right away

[kirill-konshin]

There is a difference in getChildRoutes vs childRoutes behavior. IndexRoutes along the way are expected to be used even if they belong to "empty" path sub-routes, which is true for childRoutes and does not work when routes are asynchronously loaded via getChildRoutes.

Version

2.8.1

Test Case

http://jsbin.com/xajuyoj/5/edit?js,console,output

Steps to reproduce

Click "Feed", then click "Feed 1"

Expected Behavior

When "Feed" is clicked getChildRoutes is expected to be loaded (because route matches /feed), index page supposed to be displayed.

Actual Behavior

getChildRoutes is not loaded when "Feed" is clicked.
getChildRoutes is called only when route becomes /feed/1, e.g. when "Feed 1" is clicked.
If sync childRoutes is used the behavior is correct.

PS

The rationale is to offload the entire sub-tree (incl. index route and route with params) into a code split point. Seems that right now the only option is to separately offload index route and child routes, there's no way to put them both in one chunk.

[timdorr]

You should be using indexRoute's async counterpart getIndexRoute: https://github.com/ReactTraining/react-router/blob/master/docs/API.md#getindexroutepartialnextstate-callback

[kirill-konshin]

No, please look again.

I have specifically pointed out the difference in behavior of childRoutes vs. getChildRoutes. I am aware of getIndexRoute method, but that's not the case since IndexRoute belongs to a nested Route w/o path and this is done specifically to avoid getIndexRoute:

Root path="/" component={App}
  Root component={Layout} path="feed" <------ this one has getChildRoutes
    Root component={FeedLayout} <------- this one is loaded asynchronously
      IndexRoute
      Route path=":feedId"

If setup is synchronous everything works, if setup is async getChildRoutes is not called until user navigates anywhere inside /feed/ route, for instance /feed/1, but in fact, async load should happen when at least /feed is matched.

[timdorr]

Yeah, looks like you're right. Sorry about the quick closing.

[khakulov]

is there any idea how to fix this?

[kirill-konshin]

Any updates? It's 4 weeks since it was created...

[ryanflorence]

Our limited time to work on this is focused on v4, but we will happily merge a pull request to correct this behavior.

[ryanflorence]

It's 4 weeks since it was created...

This is open source, so you are just as responsible as us to have done something in the last four weeks 😉

[kirill-konshin]

If only I knew where to look at least :) any suggestions? I am totally fine to make a PR.

[ryanflorence]

I haven't been in that code in a long time, I'd drop a debugger in your getChildRoutes call and then follow the stack trace up as a starting point.

[ryanflorence]

if I remember right, it's probably somewhere in "transition manager"

[kirill-konshin]

OK, I'll take a look. Basically the issue boils down to a place when async getChildRoutes should be loaded if previous URL portion matches, e.g. when route is /feed/1 it's called and when /feed it's not...

[timdorr]

Actually, you'll want to look here: https://github.com/ReactTraining/react-router/blob/v3/modules/matchRoutes.js

If you want to do a PR (which would be great!), you should do so against the v3 branch since it's technically a behavior change and should go into the next major anyways.

[kirill-konshin]

I've updated my setup to 3.0.0 but the behavior is still the same.

http://jsbin.com/lihagoxupu/2/edit?js,console,output

[kirill-konshin]

I confirm that bug is not reproduced on 3.0.2. Updated setup: http://jsbin.com/cidojibijo/5/edit?js,console,output