react-router: Miss is broken

"Miss"ing in the v4-alt branch is equivalent to <=3.x, you would use a /* pattern to catch-all any missing routes and provide a <NotFound> kind of component back.

If I understand correctly, in v4-alt and you can’t have multiple routes matching at once. But instead you can nest multiple routers?

I have not been able to try v4-alt yet but one thing I try to deduce from the code is if sub-routers must concern themselves with the full url or just the part relative to the parent router (like in v4 with match). That compose-ability that v4 allows by only concerning children with only the part that is relative is quite amazing and it would be sad if that isn’t kept. If it is kept I don’t have much to say for v4 vs v4-alt. Both have things going for them and the react-approach is really the nicest router API I have ever seen so I think either one is great.

Seeing the same thing here & when using the MatchWhenAuthorized component pattern as well (so maybe something racey caused by that using subcomponents).

I actually may be seeing a similar bit of weirdness with componentWillMount and componentWillUnmount on the subcomponents of what are two mutually exclusive routes.

When a first, currently active route (but listed second in the markup) goes invalid and unmatches at the same time that the second one (but listed first) matches, the componentWillUnmount effects in the subcomponents from the original matched route end up firing AFTER the componentWillMount effects of the subcomponents in the newly matched one. And if both of those overlapping mismatched methods modify, say, the same place of a redux store, then the state will end up as the now unmounted component intended rather than as the newly mounted component would have it.

Reverse the markup order of the two Matches (and start on the other one from before and navigate back), and the oddity reverses as well.

Now obviously one problem here is causing side-effects in componentWillMount when per React docs those should go in componentDidMount (though that leads to double rendering). But it’s an unintuitive a gotcha that could be at work here in Match/Miss, maybe? Here’s a pen of the effect, http://codepen.io/dtipson/pen/dOKYvr?editors=1111 (open the console, note how the switch from B to A works).

Also note that this is a factor when you list HOCs parallel to each other and each decides whether to render their subcomponents or not. If they’re mutually exclusive (that is, some prop decides which to display in a ternary or logical stack), the weirdness vanishes.

This issue is about the published alpha version. The current state of the v4 branch is much different. It doesn’t even have Miss anymore, etc.

I think the published version is too broken to use, at the moment.

On Mon, Dec 19, 2016 at 7:45 AM Rasmus Eneman notifications@github.com wrote:

I this issue still about the published version, or the rewrite?

We are experiencing problems with alpha 6 and are unsure how to proceed, is it still too early to try to use version 4?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ReactTraining/react-router/issues/4221#issuecomment-267967198, or mute the thread https://github.com/notifications/unsubscribe-auth/AAdlwYU2-1tohAph5QBI7RO_cDJjQtUWks5rJop_gaJpZM4K9FSJ .