Router.router usage?

[dedale]

Hello,

I am trying to use latest Feliz.Router version, but I do not understand how to migrate the following code from https://github.com/Zaid-Ajaj/login-with-url-extended/blob/18c41771e1fa68d865b2aaf1614b8e6640087f54/src/Home.fs#L145-L153:

Router.router [
    Router.onUrlChange (parseUrl >> UrlChanged >> dispatch)
    Router.application [
        Html.div [
            prop.style [ style.padding 20 ]
            prop.children [ activePage ]
        ]
    ]
]

It seems API has changed in version 3.0.

Thanks for your help

Poke @Shmew

[dedale]

Here is an attempt to make it work:

type MyRouterProps (state, dispatch) =
    let activePage =
        match state.CurrentPage with
        | Page.Login login -> Pages.Login.render login (LoginMsg >> dispatch)
        //| Page.Overview overview -> Overview.render overview (OverviewMsg >> dispatch)
        | Page.Index -> index state dispatch
        | Page.NotFound -> Html.h1 "Not Found"

    interface Router.RouterProps with
        member x.onUrlChanged: (string list -> unit) option =
            Some (parseUrl >> UrlChanged >> dispatch)

        member x.application: ReactElement option =
            Html.div [
                prop.style [ style.padding 20 ]
                prop.children [ activePage ]
            ] |> Some

        member x.hashMode: RouteMode option =
            None

let render (state: State) (dispatch: Msg -> unit) =
    Router.router (MyRouterProps(state, dispatch))

Is there a better natural way to improve this code?

[dedale]

Well this does not work, I am downgrading Feliz.Router to 2.1.0 temporarily.

[Shmew]

Hey @dedale,

The API was changed to be a bit more idiomatic, so this code:

Router.router [
    Router.onUrlChange (parseUrl >> UrlChanged >> dispatch)
    Router.application [
        Html.div [
            prop.style [ style.padding 20 ]
            prop.children [ activePage ]
        ]
    ]
]

Would become:

React.router [
    router.onUrlChange (parseUrl >> UrlChanged >> dispatch)

    router.children [
        Html.div [
            prop.style [ style.padding 20 ]
            prop.children [ activePage ]
        ]
    ]
]

[dedale]

The API was changed to be a bit more idiomatic, so this code:

Thanks a lot @Shmew for your help