如何在 nextjs 的 getInitialProps 无状态组件中访问路由器参数

Posted 2023-02-22

【中文标题】如何在 nextjs 的 getInitialProps 无状态组件中访问路由器参数

【英文标题】：how to access router params in getInitialProps stateles component in nextjs

【发布时间】：2020-03-25 14:43:24

【问题描述】：

我正在使用 nextjs，但我在使用 getInitialProps 时遇到了问题。

我想在 getInitialProps 中使用我在 Post Component 中创建的变量。 你可以看到我的男女同校：

const Post = props => 
  const router = useRouter()
   let id = router.query.id  
   let urlTitle = router.query.title

  return (
    <Layout>
       //somthing
    </Layout>
  )



Post.getInitialProps = async () => 

// i want to use id and urlTitle here

我该怎么做？！！！

【问题讨论】：

您的id 和urlTitle 来自router，不是吗。你会在哪里打电话给Post.getInitialProps？另外为什么这个问题用react-hooks 标记？

@dev_junwen 是的，它们来自路由器，我想在 Post.getInitialProps 中使用它

你在哪个地方打电话Post.getInitialProps？

在 Post 组件内部。 ts 像 next js doc exapmle (nextjs.org/learn/basics/fetching-data-for-pages/…) 但我想在 Post.getInitialProps 中使用路由器参数

【参考方案1】：

您应该能够从 getInitialProps 访问 query

const Post = (id, urlTitle) => 

  return (
    <Layout>
       //somthing
    </Layout>
  )



Post.getInitialProps = async ( query ) => 

  const  id, title  = query

  return 
    id,
    urlTirle: title