Blitz 尚在 beat 阶段! 🎉 预计会在今年的 Q3 季度发布 1.0
Back to Documentation Menu

浅层路由

Topics

Jump to a Topic

浅层路由允许你改变 URL,无需再次调用数据获取方法,包括 getServerSidePropsgetStaticProps。你将在不丢失状态的情况下,通 过router 对象 (由 useRouter或者 withRouter添加 )获取更新后的pathnamequery 。要启用浅层路由,需要将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)当前页面 ,加载新的页面,并等待获取数据。


Idea for improving this page? Edit it on GitHub.