Zaid-Ajaj / the-elmish-book

A practical guide to building modern and reliable web applications in F# from first principles
https://zaid-ajaj.github.io/the-elmish-book
Other
338 stars 50 forks source link

Router.navigate vs. Cmd.navigate in "Programmatic Navigation" chapter? #173

Closed WallaceKelly closed 2 years ago

WallaceKelly commented 2 years ago

In this code sample from The Elmish Book...

let update (msg: Msg) (state: State) =
  match msg with
  | UrlChanged url -> { state with CurrentUrl = url }, Cmd.none
  | NavigateToContact ->  state, Router.navigate("contact")
  | NavigateToAbout -> state, Router.navigate("about")

...using the Router.navigate(...) methods does not work for me. In contrast, using Cmd.navigate(...) does work. Do you think this is a bug in the sample? Or something different about my project?

image

Here are my library references:

<PackageReference Include="Fable.Elmish.React" Version="3.0.1" />
<PackageReference Include="Fable.SimpleHttp" Version="3.0.0" />
<PackageReference Include="Feliz" Version="1.51.0" />
<PackageReference Include="Feliz.Bulma" Version="2.18.0" />
<PackageReference Include="Feliz.Router" Version="3.8.0" />

And my open directives:

open Elmish
open Feliz
open Feliz.Bulma
open Feliz.Router

I'd be glad to assemble a PR, if the code sample should be corrected.

MangelMaxime commented 2 years ago

Hello @WallaceKelly,

I don't know Feliz.Router well but looking at the error signature Cmd.navigate seems the right option here.

Router.navigate seems to return unit and not a Cmd<'T>.

I suppose Router.navigate can be used inside a callback or from the view.

WallaceKelly commented 2 years ago

Upon further investigation, I find that this change is a difference between Feliz.Router 2.x and Feliz.Router 3.x.

https://github.com/Zaid-Ajaj/Feliz.Router#migrating-from-2x-to-3x says,

The 3.x release refactored the API... Router.navigate becomes Cmd.navigate for the Elmish variant...

If someone were working through "The Elmish Book", they would not have installed a Feliz.Router 2.x version. The instructions here say to use dotnet add package Feliz.Router.

I will assemble a PR to reflect Feliz.Router 3.x.