浅层路由允许你改变 URL,无需再次调用数据获取方法,包括
getServerSideProps
和
getStaticProps
。你将在不丢失状态的情况下,通
过router
对象 (由
useRouter
或者 withRouter
添加
)获取更新后的pathname
和 query
。要启用浅层路由,需要将shallow
配置项
设置true
。考虑如下示例:
import { useEffect } from "react"
import { useRouter } from "blitz"
// 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
URL 将会更新为/?counter=10
,并且页面不会被替换,只有路由状态会发生改变。
你也可以通过下面示例中
的componentDidUpdate
来
监听 URL 的变更。
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
}
}
浅层路由仅仅旨在相同页面的 URL 发生变化时可用。例如,假设有另一个
叫pages/about.ts
的页面,并且你执行了以下代码:
router.push("/?counter=10", "/about?counter=10", { shallow: true })
因为这是一个新页面,即使我们设置了渐层路由,页面仍旧会卸载(unload)当前页面 ,加载新的页面,并等待获取数据。