這陣子工作專案使用next.js，剛好遇到個常會用到的功能，所以隨手紀錄一下。
next.js中要對 url 進行修改，我們通常會使用next提供的 Router 進行設定：
import React, { useEffect} from 'react'
// 使用 next.js 中的 Router
import { useRouter } from 'next/router'
const Example = () => {
const router = useRouter()
useEffect(() => {
router.push(
{
pathname: '/path', // 要去的網頁
query: {} // GET object
},
)
},[])
}但某些情境下，我們會需要依據用戶操作，對 URL 中 GET 參數進行增減 or 修改，但又不讓網頁進行重新渲染/刷新，在 next.js 中可以這樣設定:
import React, { useEffect} from 'react'
// 使用 next.js 中的 Router
import { useRouter } from 'next/router'
const Example = () => {
const router = useRouter()
useEffect(() => {
const query = router.query
/* 此處撰寫 GET object 處理
EX:
query = {
type: 'aaa',
key: 'bbb'
}
// Add GET a
query.a= '1'
// Change GET type
query.type = 't'
Delete GET key
delete query.key
*/
router.push(
{
pathname: '/path', // 網頁
query: { ...query } // GET 參數
},
undefined, { shallow: true }
)
},[])
}在 router 中設定加上 undefined, shallow: true 就可以實現更新 URL的同時，不對頁面進行重新渲染/刷新，有需要的可以直接copy底下code。
router.push(
{
pathname: '/path', // 網頁
query: { ...query } // GET 參數
},
undefined, { shallow: true }
)
發表迴響