Question

当我使用Router调用时，我能够在第二次呈现数据时看到输出。

我的组件看起来像这样：

const Home = (props) => {
  console.log("all props", props)
  let { router } = props
  let { category, item } = router.query
  console.log("Cat", category)
  console.log("Item", item)
  return (
    <FirebaseContext.Provider value={new Firebase()}>
      <div>
        <Head>
          <title>Category</title>
        </Head>
        <Navigation />
        {/* <Item category={category} item={item} {...props} /> */}
      </div>
    </FirebaseContext.Provider>
  )
}

Home.getInitialProps = async (props) => {
  console.log(props)
    return { req, query }
}

export default compose(withRouter, withAuthentication)(Home)

如果您查看控制台，则第一个渲染看起来像：

asPath: "/c/cigars/1231"
back: ƒ ()
beforePopState: ƒ ()
events: {on: ƒ, off: ƒ, emit: ƒ}
pathname: "/c/[category]/[item]"
prefetch: ƒ ()
push: ƒ ()
query: {}

即使查询清楚地识别了asPath，为什么查询还是空的？

Answer 1

这是React Router的withRouter吗？

如果是，则不会添加查询道具-它将添加名为：位置，历史记录和匹配项的道具

Answer 2

这可能与Automatic Static Optimization有关

Next.js documentation说：

通过“自动静态优化”进行静态优化的页面将被水化，而不会提供其路由参数，即query将是一个空对象（{}）。

为什么在NextJS中首次渲染withRouter router.query为空？

2 个答案: