NextJS 如果 router.back() 没有历史记录可路由,则路由到 home

asc*_*yan 10 browser-history reactjs next.js next-router

我正在使用 NextJS (v.13.4.15) 应用程序目录

我正在使用反应本机 webview 在移动应用程序内显示网站,因此后退按钮对于导航至关重要(我无法访问浏览器的后退按钮)

我想要类似的东西

'use client' 作为客户端组件:

    <button
      onClick={() => window.history.state && window.history.state.idx > 0 ? router.back() : router.push('/')}
    >
Run Code Online (Sandbox Code Playgroud)

但是我无法让它工作,NextJS 似乎在访问 window.history 时遇到问题(或者可能不是 NextJS,这只是一个隐私问题)

即使我可以访问该窗口,该窗口对象也包含令人困惑且不一致的子属性和值,如下所示:

{
    "__NA": true,
    "tree": [
        "",
        {
            "children": [
                "courses",
                {
                    "children": [
                        [
                            "slug",
                            "hacking-success",
                            "c"
                        ],
                        {
                            "children": [
                                "__PAGE__",
                                {}
                            ]
                        }
                    ]
                }
            ]
        },
        null,
        null,
        true
    ]
}
Run Code Online (Sandbox Code Playgroud)

必须有一种方法来检查 (router.back()) 是否为空或无法返回,然后检查 router.push('/) 对吗?

理想情况下:

router.back() ?? router.push('/')
Run Code Online (Sandbox Code Playgroud)

或者有人可以帮助解释这个history.state.idx.tree?长度似乎与导航中历史记录项目的数量不匹配,而是与 URL 的父级/层次结构匹配

我希望 NextJS 在路由器上有一个方法,可以返回历史记录,或者在历史记录为空时提供 null/false 值

但是我已阅读useRouter() 文档,似乎不存在任何方法

我尝试访问该window.history对象,但无法编写代码来检查历史记录是否不包含导航回的路径

我唯一的另一个想法是在链接到可以检查的“非主页”时传递一个参数,然后根据该参数有条件地更改后退按钮逻辑,但这似乎效率低下

这个答案很接近,但似乎效率低下