淺路由

範例

• Shallow Routing

淺路由能讓您在不觸發 getServerSideProps、getStaticProps 以及 getInitialProps 的條件下改變網址。

您將可以在不影響現有狀態下從 router 物件 裡取得更新過後的 pathname 以及 query（由 useRouter 或是 withRouter 所提供的 ）。

將 shallow 選項設定為 true 便可啟用淺路由，詳情可見下方的範例：

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// Current URL is '/'
function Page() {
  const router = useRouter()

  useEffect(() => {
    // Always do navigations after the first render
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
    // The counter changed!
  }, [router.query.counter])
}

export default Page

網址將會在頁面不被取代的狀況下被更新為 /?counter=10。

您也可以使用 componentDidUpdate 來觀察網址的改變，就像下方範例一樣：

componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // verify props have changed to avoid an infinite loop
  if (query.counter !== prevProps.router.query.counter) {
    // fetch data based on the new query
  }
}

警告

淺路由 只會 改變當下頁面的網址。舉例來說，假設我們有另一個頁面名為 pages/about.js，並執行了下方的程式碼：

router.push('/?counter=10', '/about?counter=10', { shallow: true })

因為這是一個新的頁面，就算我們選擇啟用了淺路由，他還是會移除掉原有的頁面，並且跳轉到新的頁面，同時也會觸發新頁面上用來取得資料的程式。

當您將淺路由和中介軟體（middleware）一起使用時，不能保證新的頁面會符合沒有使用中介軟體的舊的頁面。 這是因為中介軟體可以動態的改寫資料，並且使用淺路由時資料驗證的步驟會在客戶端被跳過。所以，一個淺路由必須永遠被視為 shallow 的。