You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using <Switch>, it seems the incorrect route is matched for 1 frame when using the browser back button.
Even though the more specific route is listed first, the less specific route is matched for 1 frame.
This causes problems in the less-specific route component if we depend on a route parameter:
In my example (https://github.com/doggan/wouter-back-bug/blob/main/src/App.tsx#L16-L17), I have hooks that depend on the route parameter. This component expects the ids to be of some form 123456, but when using the browser back button, it will be called once with the id new, even though the more specific route should have matched that route.
As workaround, I can add logic to not execute hook logic when id === new, but this is hacky and the hooks shouldn't need to know about other routes in the application. It's also complicated by the fact that we can't conditionally render hooks.
Go to characters/new route. The CharacterCreationPage component is correctly rendered.
Click link to navigate to characters/123456 route. The CharacterPage component is correctly rendered.
Click browser back button to go back to characters/new.
Actual: The CharacterPage component is rendered once with new as it's parameter id, and then the CharacterCreationPage component is rendered. You can see from the console.logs:
Expected: The CharacterCreationPage should be rendered. The CharacterPage should not be rendered since the route doesn't match. You can see from the console.logs:
Note: This "correct" behavior is achieved by clicking on a Link. The bug only happens when using the browser 'back' button.
Thank you for reading! I really appreciate the work put into this library. This has been the one small issue I've encountered so far.
The text was updated successfully, but these errors were encountered:
Issue
<Switch>
, it seems the incorrect route is matched for 1 frame when using the browser back button.123456
, but when using the browser back button, it will be called once with the idnew
, even though the more specific route should have matched that route.Repro
Resources
Steps
characters/new
route. The CharacterCreationPage component is correctly rendered.characters/123456
route. The CharacterPage component is correctly rendered.characters/new
.new
as it's parameter id, and then the CharacterCreationPage component is rendered. You can see from the console.logs:Thank you for reading! I really appreciate the work put into this library. This has been the one small issue I've encountered so far.
The text was updated successfully, but these errors were encountered: