next.js - 如何从 Next.js 中的 URL 获取(查询字符串)参数？

Question

当我点击 /index.js 中的链接时，它把我带到 /about.js页。
但是，当我通过 URL(如 /about?name=leangchhean )从 /index.js 传递参数名称时至 /about.js ，我不知道如何在/about.js 中获取它页。
索引.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

使用路由器 Hook 。
您可以使用 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>

或者

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

  ...
}