Javascript 如何使用；useRouter（）；从类组件中的next.js开始？_Javascript_Reactjs_Routing_React Hooks_Next.js

Javascript 如何使用；useRouter（）；从类组件中的next.js开始？

javascript reactjs routing next.js

Javascript 如何使用；useRouter（）；从类组件中的next.js开始？,javascript,reactjs,routing,react-hooks,next.js,Javascript,Reactjs,Routing,React Hooks,Next.js,我试图从我的url模式中获取查询，比如localhost:3000/post？loc=100，方法是使用“next/router”中的useRouter（），并使用该id从我的服务器获取一些数据。当我在一个无状态功能组件中使用它时，它工作了但是显示“无效钩子调用”的页面。我尝试调用一个无状态函数组件的getInitalProps（），但它在那里也不起作用，并且显示了相同的错误。使用这种方法有什么规则吗我正在使用React库和Next.js框架开发前端构造函数（道具）{ 此.state={

我试图从我的url模式中获取查询，比如

localhost:3000/post？loc=100

，方法是使用“next/router”中的

useRouter（）

，并使用该id从我的服务器获取一些数据。当我在一个无状态功能组件中使用它时，它工作了

但是显示“无效钩子调用”的页面。我尝试调用一个无状态函数组件的

getInitalProps（）

，但它在那里也不起作用，并且显示了相同的错误。使用这种方法有什么规则吗

我正在使用React库和Next.js框架开发前端

构造函数（道具）{
此.state={
loc:useRouter（）.query.loc，
加载：false
};
}

挂钩只能在功能组件内部使用，不能在类内部使用。我建议根据next.js文档使用HOC：

对类组件使用

useRouter

钩子，或

withRouter

或者看看是否要切换到挂钩

通常，可以创建一个包装器功能组件，通过props将自定义钩子传递到类组件中（但在这种情况下不有用）：

constmyclasswithrouter=（props）=>{
const router=useRouter（）
返回
}
类MyClass。。。
建造师（道具）{
此.state={
loc:props.router.query.loc，
加载：false
};
}

带路由器
示例

提到了，但像我这样的新手需要更多的细节。更详细/直接的描述如下：

功能组件：

import { useRouter } from "next/router";

export default function Post() {
  const router = useRouter();
  return (
    <div>{ router.query.id }</div>
  )
}

然后，我将其作为：

git clone https://github.com/vercel/next-learn-starter
cd next-learn-starter
git checkout 5c2f8513a3dac5ba5b6c7621d8ea0dda881235ea
cd next-learn-starter
npm install
npm run dev

现在当我访问：http://localhost:3000/posts/ssg-我明白了：

router.query.id = ssg-ssr

然后我将其转换为等效的类：

import { withRouter } from 'next/router'
import React from "react";

export default withRouter(class extends React.Component {
  render() {
    return (
      <div>{ this.props.router.query.id }</div>
    )
  }
})

import Layout from '../../components/layout'
import { getAllPostIds, getPostData } from '../../lib/posts'
import Head from 'next/head'
import Date from '../../components/date'
import utilStyles from '../../styles/utils.module.css'

import { withRouter } from 'next/router'
import React from "react"


export default withRouter(class extends React.Component {
  render() {
    return (
      <Layout>
        <Head>
          <title>{this.props.postData.title}</title>
        </Head>
        <article>
          <div>router.query.id = {this.props.router.query.id}</div>
          <h1 className={utilStyles.headingXl}>{this.props.postData.title}</h1>
          <div className={utilStyles.lightText}>
            <Date dateString={this.props.postData.date} />
          </div>
          <div dangerouslySetInnerHTML={{ __html: this.props.postData.contentHtml }} />
        </article>
      </Layout>
    )
  }
})

export async function getStaticPaths() {
  const paths = getAllPostIds()
  return {
    paths,
    fallback: false
  }
}

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id)
  return {
    props: {
      postData
    }
  }
}

从“../../components/Layout”导入布局
从“../../lib/posts”导入{GetAllPostId，getPostData}
从“下一个/头”导入头
从“../../components/Date”导入日期
从“../../styles/utils.module.css”导入utilStyles
从“下一个/路由器”导入{withRouter}
从“React”导入React
使用路由器导出默认值（类扩展React.Component{
render（）{
返回(
{this.props.postData.title}
router.query.id={this.props.router.query.id}
{this.props.postData.title}
)
}
})
导出异步函数getStaticPaths（）{
常量路径=GetAllPostId（）
返回{
路径，
后退：错误
}
}
导出异步函数getStaticProps（{params}）{
const postData=await getPostData（params.id）
返回{
道具：{
postData
}
}
}

一切似乎都没有改变

在Next.js 10.2.2上测试。

对话可能有用，但

useRouter

功能似乎仍处于试验阶段。您通常可以从getInitialProps生命周期中接收的上下文值访问位置信息。新链接可能重复：因为指向自述的链接是

router.query.id = ssg-ssr

import Layout from '../../components/layout'
import { getAllPostIds, getPostData } from '../../lib/posts'
import Head from 'next/head'
import Date from '../../components/date'
import utilStyles from '../../styles/utils.module.css'

import { withRouter } from 'next/router'
import React from "react"


export default withRouter(class extends React.Component {
  render() {
    return (
      <Layout>
        <Head>
          <title>{this.props.postData.title}</title>
        </Head>
        <article>
          <div>router.query.id = {this.props.router.query.id}</div>
          <h1 className={utilStyles.headingXl}>{this.props.postData.title}</h1>
          <div className={utilStyles.lightText}>
            <Date dateString={this.props.postData.date} />
          </div>
          <div dangerouslySetInnerHTML={{ __html: this.props.postData.contentHtml }} />
        </article>
      </Layout>
    )
  }
})

export async function getStaticPaths() {
  const paths = getAllPostIds()
  return {
    paths,
    fallback: false
  }
}

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id)
  return {
    props: {
      postData
    }
  }
}