pinecone-router / router

The extensible client-side router for Alpine.js v3
https://pinecone-example.vercel.app/
MIT License
230 stars 7 forks source link

Back and Forth navigation doesn't always work #16

Closed daniel-kozma closed 1 year ago

daniel-kozma commented 1 year ago

Describe the bug I have discovered a bug with back and forth navigation (the back and forth arrows) Screenshot of the left part of the address bar on chrome They don't always work

To Reproduce Steps to reproduce the behavior:

  1. Go to "https://pinecone-example.vercel.app/"
  2. Click on "Hello World" (first green button)
  3. Type "test" into the input box and press enter
  4. Type "home" into the input box and press enter
  5. After being redirected to "/", clicking the back button will not do anything, also, there are no errors in the console.

Screenshots image image image image

Environment

rehhouari commented 1 year ago

hello! thanks for the great report! I've done some testing and it apprears that this is an issue with the example. this is how the example work:

  1. write home in /hello/ input
  2. router navigates to /hello/home
  3. /hello/:name route has a handler that checkes if :name is home
  4. in this case its true and thus redirects to /
  5. when you press the back button it goes back to /hello/home
  6. you get redirected to / again (and so you're stuck)

this seems to be an issue with the way the example is designed rather than the router itself.

a better way to do this example would be: instead of the checking the :name in the handler, check it with alpine when the user press enter and redirect. this way there wont be a /hello/home in history:

<input @change="$router.redirect($event.target.value == 'home'? '/' : '/hello/' + $event.target.value)"` />

i made the example like this to demonstrate using different handlers but this usecase isn't that good i guess 😅

thanks alot for pointing it out! ill see if ill change the example. and ill be closing this issue since its not router related.

feel free to comment if you still have any issues or make another issue.