Rendering paths wrapped in an ErrorBoundary with @reach/router

Question

To make this short, I am trying to render some routes wrapped in ErrorBoundaries inside the Router but it does not correctly match the path supplied.

Here is a quick sandbox example that I set up to show what I am talking about. If you check out the sandbox, and click on the test link, you can see that nothing renders even though the ComponentWithoutErrors has a path match on /test.

Any help would be greatly appreciated.

https://codesandbox.io/s/still-fire-bfehr?fontsize=14&hidenavigation=1&theme=dark

Sorry, I keep forgetting that if I play around with it, it actually updates the link I shared! Should be sorted out now! — Michael Nissen, Nov 15 '19 at 18:27

score 1 · Accepted Answer · answered Nov 15 '19 at 19:14

This issue happens because ComponentWithoutErrors has a path of test and the ErrorBoundary surrounding it also has a path of test. So it matches test/test. We need to make the ComponentWithoutErrors component to have a path of /.

Here is the codesandbox

https://codesandbox.io/s/infallible-zhukovsky-evw2b

Rendering paths wrapped in an ErrorBoundary with @reach/router

1 Answers1