Get updates via , Github, or RSS | About

Episode 53: SPA - Navigation Feb 15, 2018

The next step in our Single Page Application series is to add url routing and navigation. There are two packages we’ll need for this. The first, Navigation, will allow us to handle navigation events and starting the application on a page other than the home page.

The second package, Url-Parser, helps us parse our url’s path into an Elm sum type which we can use to determine which page to render in the view.



# Force the server to render index.html on 404s
./node_modules/.bin/webpack-dev-server --history-api-fallback


setRoute : Location -> Model -> Model
setRoute location model =
        route =
            UrlParser.parsePath Route.route location
                |> Maybe.withDefault Route.Home
        case route of
            Route.Home ->
                { model | page = Home }

            Route.Newest ->
                { model | page = Newest }