Change URL only

[absolutejam]

Morning!

First off, I just want to say thanks for all of the work you've put in to the F#/Fable/Elmish community. I'm using a tonne of your libraries and the Dev Owl series & Elmish book really helped me get started.

---

I'm using Feliz.Router to detect URL changes and route accordingly, but within my app I've opted for the approach of routing via. messages (eg. AppRoute.HomePage or AppRoute.GetUser id) to better leverage compiler safety. However, I'm now a bit stuck as this method doesn't change the URL or alter the history.

Is there any way that I can manually alter the URL and history, without actually firing the onUrlChanged? I know I could emulate what the library is doing but it seems a bit redundant if there's already a way.

[Zaid-Ajaj]

Hi there @absolutejam,

Happy to hear that my work is useful for you 😄

Is there any way that I can manually alter the URL and history, without actually firing the onUrlChanged?

Once you manually alter the URL, then onUrlChanged will fire and this is quite necessary: you want the application to react to the fact that the URL has changed.

I believe the Programmatic Navigation section from the docs is what you are looking for. The same concept is presented in the book as well if you wanted to see a live example

[absolutejam]

Hm, maybe I'll have to rethink my approach then.

It's just because, my current setup is as follows:

• User navigates to URL (eg. loads a bookmark, clicks an external link)
• onUrlChanged fires as so: Router.onUrlChanged (parseUrl >> RouteChanged >> dispatch)
• RouteChanged message handled by update and will initialise the Page as appropriate

However, for inter-page navigation within my app, I'm directly sending RouteChanged messages as the experience of using a using a statically-typed, intellisense aware type seemed superior to error-prone arrays (especially in the event of refactoring).

Have you ever considered something like this? Something like extending the customNavigationEvent to handle a case where it doesn't fire the onUrlChanged callback but still affects the history & url?

Thanks for your help!

[Zaid-Ajaj]

However, for inter-page navigation within my app, I'm directly sending RouteChanged messages as the experience of using a using a statically-typed, intellisense aware type seemed superior to error-prone arrays (especially in the event of refactoring).

I wouldn't recommend dispatching RouteChanged yourself, because that means the URL will go out of sync with your state. To make the URLs type safe, you can simply use [<Literal>] attributes to mark parts of the URL which makes them easier to match against:

module Urls 

let [<Literal>] home = "home"
let [<Literal>] profile = "profile"

Then when pattern matching or navigation, you can write:

match url with 
| [ Urls.home ] -> (* show home page *) 
| [ Urls.home; Urls.profile ] -> (* show profile home *)

The same URL segments can be used in Router.navigate function

[Zaid-Ajaj]

I will close this issue for now, please reopen if you still have questions or facing any routing problem