onClick消息会导致页面不必要的刷新

Question

我正在尝试在Elm中建立一个网站，其中包含一些更改语言的链接：

div [ class "language" ][ a [ class englishClass, onClick (ChangeLanguage English) ] [ text "EN" ]
                        , a [ class germanClass, onClick (ChangeLanguage German) ] [ text "DE" ]
                        , a [ class italianClass, onClick (ChangeLanguage Italian) ] [ text "IT" ]
                        ]

我的更新看起来像这样：

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ...  -- Stuff for URLs

        ChangeLanguage language ->
            ( { model | language = language }
            , Cmd.none
            )

type Msg
    = LinkClicked Browser.UrlRequest
    | UrlChanged Url.Url
    | ChangeLanguage Language

这是我的模特：

type alias Model =
    { key : Nav.Key
    , url : Url.Url
    , language : Language
    }

这是我的init函数，（至少在我看来，它默认为英语：）

init : flags -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
init _ url key = ( Model key url English, Cmd.none )

问题：

每当我单击更改语言的链接时，它们do似乎都起作用：我看到页面中段落的语言发生了变化，但是随后发生了一些不需要的事情：

1. 页面刷新。由于我已经在页面上看到了语言更改，因此很明显不需要这样做，因此我想避免这种情况。
2. 结果为1时，视口将再次移至页面顶部。
3. 语言再次更改为默认英语！

我如何避免1（因此2）的发生？我缺少什么来使更改保持在整个网站上（至少在刷新页面时，因为我还没有尝试使用会话或cookie）？

Answer 1

我认为此行为是一个错误，并已为此提交了an issue，others和associated PRs也一样。但是在过去的一年半中，没有任何人可以做任何实际的事情来做这件事，这很遗憾与Elm的课程相当。

问题是Elm在onClick元素上“劫持” a来创建导航事件，以便可以在Elm内部处理锚点。使用Browser.application时，单击a元素将使Elm调用onUrlReuqest，其值为Browser.UrlRequest，这会将URL分类为Internal或External。

根本原因是，省略href会生成一个External UrlRequest，且URL为空字符串。默认情况下，并按通常的External处理，这将刷新页面。但这也表明可能的解决方法是对特殊情况External ""：

update msg model =
    case msg of
        UrlRequested (Browser.Internal _) ->
            ( model, Cmd.none )

        UrlRequested (Browser.External "") ->
            ( model, Cmd.none )

        UrlRequested (Browser.External url) ->
            ( model, Browser.Navigation.load url )

        UrlChanged _ ->
            ( model, Cmd.none )

另一种解决方法是将href="#"添加到a元素，这将把它们正确分类为Internal