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

当我点击我的链接时/index.js，它让我想到/about.js page.

但是，当我通过 URL 传递参数名称时（例如/about?name=leangchhean) from /index.js to /about.js，我不知道如何将其放入/about.js page.

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>
);

使用路由器钩子。

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

https://nextjs.org/docs/api-reference/next/router#userouter

传递参数

import Link from "next/link";

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

Or

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);

    ...
}