Routing in Elm

Define the model

Include a type in the model to represent different pages/views. For example:

type Model
  = Home
  | Settings

The type Model declares a new custom type. In the context of an application, the Model type represents the state. Here, “Home” and “Settings” are two views. It means the application can either be in the Home or the Settings state.

Update the message

Define a message to change the current page. For example:

type Msg
  = ChangePage Model

Modify the update function

To update the model, it’s necessary to handle the ChangePage message in the update function. For example:

update : Msg -> Model -> Model
update msg model =
  case msg of
      ChangePage newPage ->
          newPage

When a ChangePage message is received, it updates the state to the new page specified by newPage. This is a simple state transition where the model is replaced by the new model specified in the msg. ]

Create views

Create a view function for each page/view. For example:

view : Model -> Html Msg
view model =
  case model of
      Home ->
          -- render home page

      Settings ->
          -- render settings page

For each view, we can create a different case. The view function checks the current state of the application.

• If the model is Home, it renders the HTML for the home page.
• If the model is Settings, it renders the HTML for the settings page.

Handle navigation

Use Html.Events to capture user interactions. For example, you can handle clicks on navigation links:

type Msg
  = ChangePage Model
  | NavigateToHome
  | NavigateToSettings

Next, modify the update function accordingly:

update : Msg -> Model -> Model
update msg model =
  case msg of
      ChangePage newPage ->
          newPage

      NavigateToHome ->
          Home

      NavigateToSettings ->
          Settings

The update function is modified to handle the new message variants:

• ChangePage newPage: When this message is received, the function updates the state to newPage.

• NavigateToHome: The function updates the state to Home when receiving this message.

• NavigateToSettings: The function updates the state to Settings when receiving this message.

Add navigation links

Include links that trigger the navigation. For example:

view : Model -> Html Msg
view model =
  div []
      [ a [ onClick NavigateToHome ] [ text "Home  " ]
      , a [ onClick NavigateToSettings ] [ text "Settings  " ]
      , case model of
            Home ->
                -- render home page

            Settings ->
                -- render settings page
      ]

For navigation links:

• a [ onClick NavigateToHome ] [ text "Home " ]: This creates an anchor element that acts as a link to the “Home” page. It has an onClick event handler that triggers the NavigateToHome message when clicked.
• a [ onClick NavigateToSettings ] [ text "Settings " ]: This creates an anchor element that acts as a link to the “Settings” page. It triggers the NavigateToSettings message when clicked.

Inside the case expression, the Home -> branch is executed when model equals Home. It typically contains the HTML markup specific to the “Home” page. The Settings -> branch is executed when model equals Settings. It typically contains the HTML markup specific to the “Settings” page.