使用 Next.js 更改路線而不重新加載頁面

Question

每當用戶單擊繼續按鈕時，都會觸發 function，在該 function 中，我調用：

push("/signup/page-2", undefined, { shallow: true });

所有看起來像/signup/[page].js的動態路由返回<Component />

我還有一個返回<Component />的/signup/index.js

問題是：

每次push("/signup/page-2", undefined, { shallow: true });頁面都會重新加載並清除所有 state 叫做。

還值得一提的是，這個應用程序是一個帶有 react-router-dom 應用程序的 CRA，它被轉換為一個 next.js 應用程序

Answer 1

你對shallow-routing完全錯誤。 淺路由適用於同一頁面 URL並且通常您將更新同一頁面的查詢字符串參數，並且查詢參數的更新值將通過router獲得。

router.push('/signup/[page]', '/signup/page-1')將推送新的 URL 路徑，並將導航到與/signup/完全不同的頁面。 這就是為什么淺路由在這里不起作用並且state值重置的原因。

pages目錄中的/signup/[page].js和/signup/index.js是文件系統中兩個完全不同的文件。 如果您嘗試使用淺路由在它們之間導航，它將無法正常工作。

解決方案

這里不需要像/signup/[page]這樣的動態路由，可以通過查詢字符串更新page參數並保持相同的 URL 路徑。 在/signup/index.js頁面中，您可以獲取查詢參數的更新值並對其進行處理。

router.push({
   pathname: '/signup',
   query: {
      pageId: "page-1"  // update the query param
   }
}, undefined, { shallow: true})


// you have access to the updated value of pageId through router.query.pageId

const currPage = router.query.pageId

Answer 2

忽略此任務的下一個路由器，只需使用 JavaScript 來更改 URL - 組件不會重新加載或受到影響。

window.history.pushState(null, 'Page Title', '/newUrl'); （null 是 stateData）。

例如：
您在用戶個人資料頁面localhost.com/john上，然后單擊他們的 ID 為13983的帖子：

function onPostClicked(post){
  showPost(post);
  window.history.pushState(null, 'Post by John', '/john/p/13983');
}

然后當他們點擊離開帖子時，您可以返回到原來的 URL：

function onPostClosed(){
  hidePost();
  window.history.pushState(null, 'John', '/john');
}