如何从Next.js中的URL获取（查询字符串）参数？

Question

当我点击/index.js中的链接时，它会将我带到/about.js页面。 但是，当我将参数名称通过URL（例如 / about？name = leangchhean ）从/index.js传递到/about.js时，我不知道如何将其输入/about.js页面。

index.js

import Link from 'next/link'
export default () => (    
<div>Click <Link href={{ pathname: 'about', query: { name: 'leangchhean' }}}><a>here</a></Link> to read more</div>
)

Answer 1

使用Next.js 9或更高版本，您可以获得查询参数：

使用router：

import { useRouter } from 'next/router'

const Index = () => {
  const router = useRouter()
  const {id} = router.query

  return(<div>{id}</div>)
}

使用getInitialProps：

const Index = ({id}) => {
  return(<div>{id}</div>)
}

Index.getInitialProps = async ({ query }) => {
  const {id} = query

  return {id}
}

Answer 2

如何使用路由器挂钩？

您可以在应用程序的任何组件中使用useRouter hook。

https://github.com/zeit/next.js/#userouter

通过参数

import Link from "next/link";

<Link href={{ pathname: '/search', query: { keyword: 'this way' } }}><a>path</a></Link>

要么

import Router from 'next/router'

Router.push({
    pathname: '/search',
    query: { keyword: 'this way' },
})

在组件中

import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()
  console.log(router.query);

  ...
}

Answer 3

• 使用about.js页面中的以下代码获取它：

  

// pages/about.js
import Link from 'next/link'
export default ({ url: { query: { name } } }) => (
  <p>Welcome to About! { name }</p>
)

Answer 4

url属性已不建议使用Next.js版本6： https://github.com/zeit/next.js/blob/master/errors/url-deprecated.md

要获取查询参数，请使用getInitialProps：

对于无状态组件

import Link from 'next/link'
export default About = ({query}) => (    
  <div>Click <Link href={{ pathname: 'about', query: { name: 'leangchhean' }}}><a>here</a></Link> to read more</div>
)

About.getInitialProps = ({query}) => {
  return {query}
}

对于常规组件

class About extends React.Component {

  static getInitialProps({query}) {
    return {query}
  }

  render() {
    console.log(this.props.query) // The query is available in the props object
    return <div>Click <Link href={{ pathname: 'about', query: { name: 'leangchhean' }}}><a>here</a></Link> to read more</div>

  }
}

查询对象将类似于：url.com?a=1&b=2&c=3变为：{a:1, b:2, c:3}

Answer 5

如果您需要从组件外部检索URL查询：

import router from 'next/router'

console.log(router.query)

Answer 6

对于那些寻求与静态出口兼容的解决方案的人，请尝试此处列出的解决方案：https://github.com/zeit/next.js/issues/4804#issuecomment-460754433

简而言之，router.query仅适用于SSR应用程序，但router.asPath仍适用。

因此可以使用exportPathMap（非动态）在next.config.js中配置查询预导出：

    return {
      '/': { page: '/' },
      '/about': { page: '/about', query: { title: 'about-us' } }
    }
  }

或者使用router.asPath并使用query-string之类的库自己解析查询：

import { withRouter } from "next/router";
import queryString from "query-string";

export const withPageRouter = Component => {
  return withRouter(({ router, ...props }) => {
    router.query = queryString.parse(router.asPath.split(/\?/)[1]);

    return <Component {...props} router={router} />;
  });
};

Answer 7

import { useRouter } from 'next/router';

function componentName() {
    const router = useRouter();
    console.log('router obj', router);
}

我们可以在路由器内部找到查询对象，通过它可以获取所有查询字符串参数。

Answer 8

Next.js已经提供了带有示例的外观

https://github.com/zeit/next.js/tree/master/examples/with-next-routes

Answer 9

Post.getInitialProps = async function(context) {

  const data = {}
  try{
    data.queryParam = queryString.parse(context.req.url.split('?')[1]);
  }catch(err){
    data.queryParam = queryString.parse(window.location.search);
  }
  return { data };
};