Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
doggan opened this issue Jun 29, 2024 · 0 comments

Comments

@doggan
Copy link

doggan commented Jun 29, 2024

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

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant