Error Boundaries disables routing inside of a Switch

Question

For a long time I have been trying to get routing to work in our app after an error boundary has been hit, but only today did I find the code that was seemingly identical to

Answer 1

To give you the shortcut of this fix, please see the new "key" prop on each of the ErrorBoundary component and each must be unique, so the code should look like this:

   (
      
        
      
    )}
  />
   (
      
        
      
    )}
  />
   (
      
        
      
    )}
  />

To elaborate, the answer of @oligofren is correct. Those 3 ErrorBoundary components are the same instances but may differ in props. You can verify this by passing "id" prop to each of the ErrorBoundary components.

Now you mentioned why is that if you remove Switch component, it works as expected? Because of this code: https://github.com/ReactTraining/react-router/blob/e81dfa2d01937969ee3f9b1f33c9ffffd319f9e091/packages/react-router/modules/Switch.js#L40

I recommend you to read the official documentation of React.cloneElement here: https://reactjs.org/docs/react-api.html#cloneelement

I hope this gives you an idea on this issue. Credit to @oligofren as he explained in more details about the idea of the instances of those components.