Zaid-Ajaj / Feliz.Router

A router component for React and Elmish that is focused, powerful and extremely easy to use.
MIT License
78 stars 16 forks source link

Url change is not detected at initialization since version 3.0.0 #50

Closed birdmod closed 1 year ago

birdmod commented 2 years ago

Hello !

First of all, thank you for this useful library I discovered while reading the Elmish book.

My issue is about the use of this router in an Elmish project for handling the very first call of my single page application to handle forced redirections exactly like this section. In this chapter we implement a behavior which says "for the first call, if the user wants to go to a secured page, redirect it to the login page". We do it by detecting that the incoming url is the secured page so we tell the router to navigate to "login" page. This will trigger the onUrlChanged of the Feliz.Router which in turn triggers an UrlChanged message containing the new url, which will be processed by the update function.

When using a version up to 2.1.0 of Feliz.Router, after a forced navigation in my init function, a UrlChanged message is produced so I can get the new url in the update function. However, when using the version 3.0.0 (and higher) of this library, after a forced navigate in my init function, the data from the UrlChanged does not reflect the url change of my addressbar

I created a minimal repository with two versions of the same case. One uses Feliz.Router 2.1.0 and the second 3.0.0. The web app exposes a home page and a restricted page. My restricted page (localhost:8080/#/restricted) should NOT be accessible as a landing page so I put in init code to navigate to the main page. My update code retrieves the url change from the UrlChanged message and stores it in the state.

Here on version 2.1.0, after a call to localhost:8080/#/restricted my logic redirects me to the home page. Which is good since the url in the addressbar and the data of the state are matching

image

But when using version 3.0.0, the data of the state retrieved from the UrlChanged message does not match the url of the addressbar. From what I understand, the UrlChanged was message was not fired. Because the state contains data of the first time a UrlChanged was fired (containing the "restricted" segment).

image

These were the only leads I got since I am not able to debug further. Was that a change with version 3.0.0+ or I am missing something with this new version ?

Thanks

taylorn16 commented 2 years ago

I just ran into the same issue. I thought I was crazy, but what you described is exactly the behavior I'm seeing. Returning a router navigation Cmd from the init function does not trigger the router.onUrlChanged function.

Zaid-Ajaj commented 2 years ago

Hi @birdmod and @taylorn16, sorry for the delayed response! I must have missed the notification. I'll have a look and let you know what the problem is!

sonicbhoc commented 2 years ago

@Zaid-Ajaj Was this ever fixed?

Zaid-Ajaj commented 1 year ago

This is fixed as of Feliz.Router v3.9.0 🚀 took me a long time, my apologies for it :pray: I was able to reproduce it and after investigating, it turns out that replaceState doesn't trigger the onUrlChanged so now I've made it such that it triggers when the router mounts.

Version v3.9.0 is the last version that will work on Fable v3 and Feliz v1.68

For Fable v4, I will upgrade a new major version v4.0.0 of Feliz.Router which will depend on Feliz v2.x

birdmod commented 1 year ago

Thank you @Zaid-Ajaj .