导航后榆树导航跳转答案

【问题标题】：Elm navigation jumps after navigation导航后榆树导航跳转
【发布时间】：2019-02-03 14:17:21
【问题描述】：

我在浏览器中使用 elm 导航时遇到问题。当我导航到某个页面 /thing/sufflist 时发生错误，该页面闪烁，然后我被转移到路径 /home。使用我的浏览器后退按钮，我可以毫无问题地访问 /thing/stufflist 页面。

/thing 是关于该事物的主页，然后它在 /thing/xxx

处具有相同的选项卡

我使用 elm 导航设置了以下路由：

        case routePath of
            DefaultRoute ->
                notFoundPage model

            HomeRoute ->
                homePage model

            ...

            ThingTab id page ->
                case String.toInt id of
                    Ok thingId ->
                        ThingMain.page thingId model page

                    Err error ->
                        ThingMain.page 0 model page

            NotFoundRoute ->
                notFoundPage model

ThingMain.page 是

page : Int -> Model -> String -> Html Msg
page thingId model page =

    let
        maybeThing =
            model.thingList
                |> List.filter (\thing -> thing.id == thingId)
                |> List.head
    in
        case maybeThing of
            Just thing ->
                    case page of
                        "info" ->
                            thingView thing (thingInfoView thing)

                        "stuffs" ->
                            let
                                stuffs =
                                    model.stuffList
                                    |> List.filter (\stuff -> stuff.ting.id == thingId)
                            in
                                thingView thing (stuffsView stuffs)

                        _ -> 
                            Error.notFoundPage model

            Nothing ->
                Error.notFoundPage model

这 suffsView：

stuffsView : List Stuff.Stuff -> Html Msg
stuffsView stuffs =
    div [class "dialog-large"][
        div [class "list"][
            renderStuffList stuffs
        ]
    ]

使用此方法渲染列表：

renderStuffList : List Stuff.Stuff -> Html Msg
renderStuffList stuffs =
    if List.isEmpty stuffs then
        text "No stuff"
    else 
        stuffs 
            |> List.map ( \stuff -> listStuff stuff )
            |> ol [ class "stuff-list" ]

并被输入到这个通用页面方法中：

thingView : Thing.Thing -> Html Msg -> Html Msg
thingView thing tabContent =
     div [class "mr-main flex-column flex-start"][
        h4 [][ text (thing.name) ]
        , tabContent        
        ,div [class "dialog-large split-choice"][
            button [class "input", onClick (Msg.Navigate("thing/" ++ toString thing.id )) ][
            text ("Info")
            ]
            ,button [class "input", onClick (Msg.PostAndNavigate (stuffListRequest thing.id)) ][
            text ("Stuffs")
            ]
        ]
        ,div [class "dialog-large split-choice"][
            button [class "input half-width", onClick ( Msg.Navigate("home") ) ][ 
                text ("Home") 
            ]
        ]
    ]

它在所有情况下都可以正常工作，除非它获得带有空列表的 stufflist 选项卡。如前所述，我什至可以向后浏览并查看我的 No stuff 页面。

对我来说，这一切似乎都是（黑色）魔法，我不知道去哪里看？

【问题讨论】：

标签： navigation elm

【解决方案1】：

这段代码没有任何问题。正如我所怀疑的那样，结果证明是我自己的错。

当我在导航到 /thing/stufflist 时执行 get(ish) 请求以同步数据时，我的逻辑中存在人为错误。事实证明，如果里面什么都没有，我没有得到一份清单。

【讨论】：