Elm routing specifying route instead of path - elm

Question

I am very new to Elm and have just looked at the Elm tutorial app https://github.com/sporto/elm-tutorial-app
I was wondering how I could change page when clicking on a link specifying the Route instead of the path.
This is the routing
type Route
= HomeRoute
| NotFoundRoute
matchers : Parser (Route -> a) a
matchers =
oneOf
[ map HomeRoute top ]
parseLocation : Location -> Route
parseLocation location =
case (parsePath matchers location) of
Just route ->
route
Nothing ->
NotFoundRoute
Now in the view I would like to pick HomeRoute when clicked on the menu link
menuItems : List MenuItem
menuItems =
[ { text = "Dashboard", iconName = "dashboard", route = HomeRoute }
]
viewDrawerMenuItem : Model -> MenuItem -> Html Msg
viewDrawerMenuItem model menuItem =
Layout.link
[ Layout.onClick (NavigateTo menuItem.route)
, (Color.background <| Color.color Color.BlueGrey Color.S600) when (model.route == menuItem.route)
, Options.css "color" "rgba(255, 255, 255, 0.56)"
, Options.css "font-weight" "500"
]
[ Icon.view menuItem.iconName
[ Color.text <| Color.color Color.BlueGrey Color.S500
, Options.css "margin-right" "32px"
]
, text menuItem.text
]
I would like to implement the Msg NavigateTo but am not sure how.
[ Layout.onClick (NavigateTo menuItem.route)
I could create an update NavigateTo that takes a route as string and then have Navigation create a new Url. Like
NavigateTo path ->
(model, Navigation.newUrl path)
But instead of using a path as string I'd rather use the union type Route.

Answer 1

In any case you need a function for converting route to string:
pageToString : Route -> String
pageToString route =
case page of
HomeRoute -> "home"
AboutRoute -> "about"
ContactRoute -> "contact"
LoginRoute -> "login"
DashboardRoute -> "dashboard"
NotFoundRoute -> "404"
And then you can do something like:
NavigateTo : Route -> (Model, Cmd a)
NavigateTo route ->
(model, (Navigation.newUrl <| pageToString route))

Answer 2

You're probably not going to want to go down the Hop route as it is deprecated for Elm v0.18. Navigation has crude example of how it should be done currently.
Adding to a different comment, it may be wiser to do a String.join on a List String since you can build a Parser that can handle many slashes.
reverse : Route -> String
reverse route =
String.join "/"
<< (::) ""
<| case route of
Index ->
[ "" ]
Foo ->
[ "foo" ]
FizzBuzz x ->
[ "fizz", "buzz", x ]
(I'd leave this as a comment, but StackOverflow has that silly reputation limit)