This page covers Tutorial v2. Elm 0.18.
In src/Models.elm we will define the possible routes for our application. Add a new type:
type Route = PlayersRoute | PlayerRoute PlayerId | NotFoundRoute
NotFoundRoute will be used when no route matches the browser path.
Create a module src/Routing.elm for defining the application routing configuration.
In this module we define:
- how to match browser paths to routes using path matchers
- how to react to routing messages
module Routing exposing (..) import Navigation exposing (Location) import Models exposing (PlayerId, Route(..)) import UrlParser exposing (..) matchers : Parser (Route -> a) a matchers = oneOf [ map PlayersRoute top , map PlayerRoute (s "players" </> string) , map PlayersRoute (s "players") ] parseLocation : Location -> Route parseLocation location = case (parseHash matchers location) of Just route -> route Nothing -> NotFoundRoute
Let's go over this module.
matchers : Parser (Route -> a) a matchers = oneOf [ map PlayersRoute top , map PlayerRoute (s "players" </> string) , map PlayersRoute (s "players") ]
Here we define route matchers. These parsers are provided by the url-parser library.
We want three matchers:
- One for the top route which will resolve to
- One for
/playerswhich will resolve to
- And one for
/players/idwhich will resolve to
Note that the order is important as routes defined first will have priority over later definitions.
See more details about this library here http://package.elm-lang.org/packages/evancz/url-parser.
parseLocation : Location -> Route parseLocation location = case (parseHash matchers location) of Just route -> route Nothing -> NotFoundRoute
Each time the browser location changes, the Navigation library will trigger a message containing a
Navigation.Location record. From our main
update we will call
parseLocation with this record.
parseLocation is a function that parses this
Location record and returns the matched
Route if possible. If all matchers fail we return
In this case we
UrlParser.parseHash as we will be routing using the hash. You could use
UrlParser.parsePath to route with the path instead.