Fun Blazor
Giraffe style Router
[<AutoOpen>]
module Fun.Blazor.Docs.Wasm.Pages.Router.GiraffeStyleRouterDemo

open MudBlazor
open Fun.Blazor
open Fun.Blazor.Router

let giraffeStyleRouterDemo =
    let formatQueries = Map.toList >> List.map (fun (k, v) -> $"key = {k}, value = {v}") >> String.concat "; "

    let route = 
        subRouteCi "/router" [
            routeCi "/document" (html.text "Dcoument page")
            routeCif "/document/%i" (fun x -> html.text $"Document {x}")
            routeCiWithQueries "/documents" (fun queries -> html.text $"Documents with query: {formatQueries queries}")
            routeCifWithQueries "/documents/%s" (fun param queries -> html.text $"Documents(Param: {param}) with query: {formatQueries queries}")
        ]

    let link (hrefStr: string) (name': string) =
        MudLink'() {
            Href hrefStr
            childContent name'
            Underline Underline.Always
            Styles [ style.marginRight 10 ]
        }

    html.div [
        MudText'() {
            Typo Typo.subtitle1
            childContent ""
        }
        MudText'() {
            Typo Typo.subtitle2
            Color Color.Secondary
            childContent [
                html.route [
                    route
                    subRouteCi "/Fun.Blazor" [ route ] // For github-pages hosting
                    routeAny (html.text "Not my concern.")
                ]
            ]
        }
        link "./router/document" "Route to document"
        link "./router/document/12" "Route to document 12"
        link "./router/documents?filter=test&q2=2" "Route to documents with query"
        link "./router/documents/fun-blazor?filter=test&q2=2" "Route to documents with query"
    ]


Feliz style Router
The reason we have something like [ "router" ] and [ _; "router" ] is because we host WASM on github and it has a sub folder url. We also host this on a blazor server side mode on another machine which all the content is under the root of domain.
Router
Try to navigate
[<AutoOpen>]
module Fun.Blazor.Docs.Wasm.Pages.Router.RouterDemo

open MudBlazor
open Fun.Blazor

let routerDemo =
    html.div [
        MudText'() {
            Typo Typo.subtitle1
            childContent "The reason we have something like [ \"router\" ] and [ _; \"router\" ] is because we host WASM on github and it has a sub folder url. We also host this on a blazor server side mode on another machine which all the content is under the root of domain."
        }
        MudText'() {
            Typo Typo.subtitle2
            Color Color.Secondary
            childContent [
                html.route (function
                    | [ "router" ]
                    | [ _; "router" ] -> html.text "Router"
                                
                    | [ "router"; Route.Query [ "name", name; "age", Route.Int age ] ]
                    | [ _; "router"; Route.Query [ "name", name; "age", Route.Int age ] ] -> html.text $"name is: {name}, age is: {age}"

                    | _ -> html.text "Not my concern."
                )
            ]
        }
        MudLink'() {
            Href "./router?name=albert&age=123"
            childContent "Try to navigate"
        }
    ]