Next.js Router.push() 自動重新加載頁面

Question

有沒有辦法在不使用 Next.js 重新加載頁面的情況下執行 Router.push()？

我正在為基於 url 呈現不同組件的頁面使用 [...all].js 主文件，但我希望能夠在它們之間移動而不觸發整個頁面重新加載 - 這是一個多步驟表單.

換句話說，我希望能夠通過將 URL 從“form/1”更新為“form/2”來在表單的步驟之間移動

Answer 1

將選項 shallow 添加為 true 以不刷新頁面

router.push('/?step=2', null, { shallow: true })

Answer 2

此頁面有更多關於路由器的信息

router.push(url, as, options)

url - URL 導航到

as - 將在瀏覽器中顯示的 URL 的可選裝飾器。 在 Next.js 9.5.3 之前，它用於動態路由，查看我們之前的文檔以了解它是如何工作的

選項 - 可選 object 具有以下配置選項：

shallow：更新當前頁面的路徑，不重新運行 getStaticProps、getServerSideProps 或 getInitialProps。 默認為假

您不需要將 router.push 用於外部 URL。 window.location 更適合這些情況

Answer 3

此頁面首先出現在 Next.js 和“頁面重新加載”上。 為了節省其他人一些時間進行故障排除，請考慮以下代碼：

router.push({query: {page: 1}}, undefined, { shallow: true });

似乎 Next.JS 的某些配置會使頁面重新加載，即使查詢與以前相同，這是實現無限循環頁面重新加載的簡單方法。 此外，除非您明確指定路徑名，否則瀏覽器也會重新加載。 我在我的服務器上看到了這種行為，但在我的筆記本電腦上卻沒有，它們都運行 Next.js 10.1.3。 據我所知，唯一的區別是我的筆記本電腦上沒有設置基本 URL，而服務器確實有基本 URL。 這可以解決問題：

let routerOpts = {page: 1};
if (!_.isEqual(routerOpts, router.query)) 
  router.push({pathname: router.pathname, query: routerOpts}, undefined, { shallow: true });

據我所知，“淺”沒有什么區別，這也很好用：

let routerOpts = {page: 1};
if (!_.isEqual(routerOpts, router.query)) router.push({pathname: router.pathname, query: routerOpts})

Answer 4

我也遇到了上述問題，實際上添加{shallow: true}並不是一個足夠好的解決方案。

根據您在表單輸入元素上的事件，例如： onKeyUp在按下回車鍵時，您可能還需要調用event.preventDefault()以防止表單重新加載頁面並允許router.push()去做這件事。 是的，D'oh； ;}

const search = (e) => {
   if ( event.key === 'Enter' && event.target.value) {
      event.preventDefault();
      router.push(`/foo?q=${event.target.value}`, undefined, { shallow: true })
   }
}

return(
  <input 
    ... 
    onKeyPress={search} 
  />
)