elm-lang/navigation/2.0.1

NOTE: this package is not compatible with Elm 0.19.1

Navigation

This is a library for managing browser navigation yourself.

The core functionality is the ability to “navigate” to new URLs, changing the address bar of the browser without the browser kicking off a request to your servers. Instead, you manage the changes yourself in Elm.

Change the URL

newUrl : String -> Cmd msg

Step to a new URL. This will add a new entry to the browser history.

Note: If the user has gone back a few pages, there will be “future pages” that the user can go forward to. Adding a new URL in that scenario will clear out any future pages. It is like going back in time and making a different choice.

modifyUrl : String -> Cmd msg

Modify the current URL. This will not add a new entry to the browser history. It just changes the one you are on right now.

Navigation

back : Int -> Cmd msg

Go back some number of pages. So back 1 goes back one page, and back 2 goes back two pages.

Note: You only manage the browser history that you created. Think of this library as letting you have access to a small part of the overall history. So if you go back farther than the history you own, you will just go back to some other website!

forward : Int -> Cmd msg

Go forward some number of pages. So forward 1 goes forward one page, and forward 2 goes forward two pages. If there are no more pages in the future, this will do nothing.

Note: You only manage the browser history that you created. Think of this library as letting you have access to a small part of the overall history. So if you go forward farther than the history you own, the user will end up on whatever website they visited next!

Programs with Locations

(Location -> msg)
-> { init : Location -> ( model, Cmd msg )
, update : msg -> model -> ( model, Cmd msg )
, view : model -> Html msg
, subscriptions : model -> Sub msg
}
-> Program Never model msg

Same as Html.program, but your update function gets messages whenever the URL changes.

The first difference is the Location -> msg argument. This converts a Location into a message whenever the URL changes. That message is fed into your update function just like any other one.

The second difference is that the init function takes Location as an argument. This lets you use the URL on the first frame.

Note: A location message is produced every time the URL changes. This includes things exposed by this library, like back and newUrl, as well as whenever the user clicks the back or forward buttons of the browsers. So if the URL changes, you will hear about it in your update function.

(Location -> msg)
-> { init : flags -> Location -> ( model, Cmd msg )
, update : msg -> model -> ( model, Cmd msg )
, view : model -> Html msg
, subscriptions : model -> Sub msg
}
-> Program flags model msg

Works the same as program, but it can also handle flags. See Html.programWithFlags for more information.

type alias Location =
{ href : String
, host : String
, hostname : String
, protocol : String
, origin : String
, port_ : String
, pathname : String
, search : String
, hash : String
, username : String
, password : String
}

A bunch of information about the address bar.

Note 1: Almost everyone will want to use a URL parsing library like evancz/url-parser to turn a Location into something more useful in your update function.

Note 2: These fields correspond exactly with the fields of document.location as described here.