如何在nextjs的this.props中获取历史和匹配? [英] How to get history and match in this.props in nextjs?

问题描述

我想在 this.props 中获取历史和匹配的值.我正在使用 next/router 导入 withRouter.我想使用 this.props.match.params 获取 url 中的值并使用 history.push 进行重定向.如何在 Next.js 中得到这个.现在我没有在 this.props 中获取历史和匹配.

解决方案

next/router 不像 react-dom-router 那样为您提供历史记录，它提供您在组件的 props 中称为查询.

这是官方的使用示例.

import { useRouter } from 'next/router'const Post = () =>{const 路由器 = useRouter()const { pid } = router.query返回<p>发布:{pid}</p>}导出默认帖子

如果你想推送路由，你可以按照这个.示例.

从'next/router'导入路由器函数阅读更多(){返回 (<div>单击 Router.push('/about')}>这里</span>阅读更多

)}导出默认值 阅读更多

I want to get values of history and match in this.props. I am using next/router to import withRouter. I wanted to use this.props.match.params to get values in the url and history.push to redirect. How can get this in Next.js. Right now I am not getting history and match in this.props.

解决方案

next/router doesn't provide you history as react-dom-router does, it gives you something called query in your component's props.

This is the official usage example.

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

If you want to push routes, you can follow this one. example.

import Router from 'next/router'

function ReadMore() {
  return (
    <div>
      Click <span onClick={() => Router.push('/about')}>here</span> to read more
    </div>
  )
}

export default ReadMore

这篇关于如何在nextjs的this.props中获取历史和匹配?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！