在 Gatsby / React 中動態更改 URL

Question

是否有 function 可用於在執行操作時從 function 更改瀏覽器中的頁面 URL？

我目前有一組分頁頁面。 當您單擊以查看另一個頁面時，具有頁面列表的組件會更改，而不會刷新頁面，並且滾動點會移動到帖子列表的頂部。 本質上，我的 function 只是用下一頁數據更改組件的內容。

所需的行為是 URL 在請求新頁面的數據時也應該更改，而不是導致重新加載。

例如。 如果您在博客頁面 1 上，則 URL 將是

domain.com/blog/1/

當您單擊導航時，它將滾動到頁面頂部（工作正常）並更改 URL 而無需刷新或重新加載到

domain.com/blog/2/

我嘗試使用 navigate() 但這似乎會導致頁面使用以下代碼重新加載。

const [currentPage, setCurrentPage] = useState(pageNumber)

useEffect(() => {
  scrollTo('#posts')

  let url = `/blog/`

  if (currentPage !== 1) {
    url = `/blog/${currentPage}/`
  }

  navigate(URL)

},[currentPage])

此外，如果您在 /blog/1/ /blog/2/ 上瀏覽到它們，這些頁面已經存在並且已經在構建時生成，我剛剛在分頁更改上修改了 URL 之后。

Answer 1

最后想通了，這一切都在開發中工作並使用 Gatsby 的 SSR

我創建了一個名為useUrlUpdate的 React Hook

export function useUrlUpdate(url) {
  if (typeof window !== `undefined` && typeof url !== `undefined`) {
    window.history.pushState({}, '', URL);
  }
  return
}

然后我的 function 現在看起來像這樣

const urlUpdate = useUrlUpdate()
const [currentPage, setCurrentPage] = useState(pageNumber)

useEffect(() => {
  scrollTo('#posts')

  let url = `/blog/`

  if (currentPage !== 1) {
    url = `/blog/${currentPage}/`
  }

  useUrlUpdate(url)


},[currentPage])