Search code examples
reactjsreach-router

Rendering paths wrapped in an ErrorBoundary with @reach/router

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

Solution

  • 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