React-router: Miss component will not render after going back to `/` in the ambiguous matches example

[tkh44]

Version

4.0.0

Test Case

https://react-router.now.sh/ambiguous-matches

Steps to reproduce

1. Click on Kim
2. Go to / (either by going back or manually typing in the url bar)
3. Click on Kim
   

   Expected Behavior

Kim should render again

Actual Behavior

The Miss component does not render.
noMatchesInContext on the Miss component state is false.

If you click on About Us or Company it seems to reset and start working again. I can reproduce this on our app so it is not just the example. Interestingly, if a hot reload occurs and the app is rendered again the page shows up.

[TimothyKrell]

As I mentioned in my duplicate issue, I think the <Miss/> component does not render, because the <MatchProvider/> is not notifying it's subscribers, preventing <Miss/> from updating state.noMatchesInContext to true.

I believe this line is the culprit: https://github.com/ReactTraining/react-router/blob/a603eaae85d8b9abf157669137406657567475de/modules/MatchProvider.js#L80

Since <MatchProvider/> is never unmounted, this.hasMatches is false. This works for the first time around, because this.hasMatches is initiated as null.

I didn't submit a pull request, because I'm unsure what the desired approach is here. May I remove the optimization, or is there a better way of handling this case?

[timdorr]

Nil strikes again!

I don't think it's a severe perf loss. I say submit a PR (also set it to allow contributors here to edit it) and we can discuss based on real code instead of theoreticals 👍

[TimothyKrell]

@timdorr Done!

[aaronshaf]

Can someone publish this latest change on npm?

[ryanflorence]

You can buy my time if you'd like, I charge $10k per week.

[ryanflorence]

It's alpha software, pull from github, npm run build, then npm link. Solve your own problems.