wouter icon indicating copy to clipboard operation
wouter copied to clipboard

wouter Switch matches less-specific Route for 1 render when using browser 'back' button

Open doggan opened this issue 1 week ago • 0 comments

Issue

  • I am using Wouter/React/Vite.
  • 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.

Repro

Resources

  • minimal repro example: https://github.com/doggan/wouter-back-bug/blob/main/src/App.tsx
  • repo if needed: https://github.com/doggan/wouter-back-bug/tree/main
  • deployed version to repro: https://wouter-back-bug.vercel.app/characters/new

Steps

  1. Go to characters/new route. The CharacterCreationPage component is correctly rendered.
  2. Click link to navigate to characters/123456 route. The CharacterPage component is correctly rendered.
  3. 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: image
  • 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: image
    • 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.

doggan avatar Jun 29 '24 01:06 doggan