用 router.replace 替换 NextJs 应用程序中的历史记录条目

Question

我们正在开发一个 React/NextJs 应用程序，我们有以下场景：

1. 用户进入包含某些优惠的“结果”页面 (

   www.oursite.com/results?someKey=1234-abcd

   )，然后单击一个优惠
2. “重定向”页面打开（

   www.oursite.com/redirect?someKey=1234-abcd

   ），其中包含用户将被重定向到我们的合作伙伴的信息。重定向应在 5 秒后或单击按钮时自动发生。在此页面之后，用户离开我们的网站并转到我们合作伙伴的网站 (

   www.ourpartner.com?someKey=1234-abcd

   )。对于这种情况，我们使用普通的 JS 超时和

   window.open(redirectUrl, '_self')

   方法。 3.如果用户单击“后退”按钮，他们将返回到“重定向”页面。但我们希望他们直接跳回结果页面 (

   www.oursite.com/results?someKey=1234-abcd

   )。

我尝试使用下一个路由器中的

replace

方法，因为我知道它将用 : 替换

当前页面（重定向页面）

import { useRouter } from 'next/router';
const router = useRouter();
router.replace(redirectUrl);

...但由于某种原因，当用户单击我们合作伙伴网站上的“返回”时，他们会再次返回到“重定向”页面，而不是返回“结果”。

我做错了什么？是否可以使用 Next 路由器来实现这一目标？还有别的办法吗？

Answer 1

我必须解决付款初始化页面的类似问题。我选择的方法是存储一些状态，表明重定向页面上的处理已在重定向用户之前完成。

如果用户第一次访问

www.oursite.com/redirect

，则不会设置任何值，并且用户会被重定向。

如果用户在重定向后返回到

www.oursite.com/redirect

，则存储的状态表明处理已完成，并且用户将被重定向到

www.oursite.com/results

。

最初我计划使用

window.history.state

，但看起来 Next.js 正在覆盖它。相反，我设置了一个 URL 参数。与此类似的东西：

  const createReturnUrl = (reason = "navigate_back") => {
    const currentUrl = new URL(window.location.href)
    currentUrl.searchParams.set("reason", reason)
    return currentUrl.toString()
  }

  const cleanUp = () => {
    const currentUrl = new URL(window.location.href)
    currentUrl.searchParams.delete("reason")
    router.replace(currentUrl.toString())
  }

  useEffect(() => {
    if (!router.isReady) {
      return
    }

    const navigatedBack = router.query.reason === "navigate_back"

    if (navigatedBack) {
      // Remove URL parameter so that going forward in history works as expected
      cleanUp()

      // If there is any history item, go one step backwards
      if (window.history.length > 1) {
        window.history.back()
        return
      } else {
        // Fallback
        router.push("www.oursite.com/results")
        return
      }
    }

    router.replace(createReturnUrl()).then(() => {
      router.push("www.ourpartner.com?someKey=1234-abcd")
    })
  }, [router.isReady])