是否有 next/Link function 将查询字符串传递给另一个 Link

Question

我正在使用 nextjs。 我正在打开host.domain/PageA?param1=one&param2=two 。 在此页面上，我有一个指向host.domain/PageB

有没有比以下方法更容易将此参数传递给 PageB 的方法：

<Link href={`/PageB?param1=${Router.query.param1}&param2=${Router.query.param2}`} />

就像是

<Link passQueryString />

Answer 1

使用 Next.js 没有本地方法可以做到这一点，您可以做的是围绕Link创建一个包装器以添加该功能。

import NextLink from "next/link";

const Link = ({ passQueryString, href, children, ...otherProps }) => (
  <NextLink href={`${href}?${passQueryString}`} {...otherProps}>
    {children}
  </NextLink>
);

export default () => (
  <div>
    Hello World.{" "}
    <Link href="/about" passQueryString="paramA=b&paramB=c">
      <a>About</a>
    </Link>
  </div>
);

您也可以使用query-string库发送 object，然后将该 object 字符串化。

import NextLink from "next/link";
import queryString from "query-string";

const Link = ({ passQueryString, href, children, ...otherProps }) => (
  <NextLink
    href={`${href}?${queryString.stringify(passQueryString)}`}
    {...otherProps}
  >
    {children}
  </NextLink>
);

export default () => (
  <div>
    Hello World.{" "}
    <Link href="/about" passQueryString={{ paramA: "a", paramB: "b" }}>
      <a>About</a>
    </Link>
  </div>
);

代码沙盒

Answer 2

“链接还可以接收 URL object，它会自动格式化以创建 URL 字符串”

所以你可以使用 instad of href="" ，这个href={{ pathname, query }}https://nextjs.org/docs/api-reference/next/link#with-url-object

import Link from 'next/link'
import { useRouter } from 'next/router'

const Index = () => {

    const router = useRouter()

    return (
        <Link href={{ pathname: '/pageB', query: { ...router.query }}}>
            <a>Test</a>
        </Link>
    )
}

或者简单地

//or <Link href={{ pathname: '/pageB', query: { params1: router.query.params1, params2: router.query.par } }}>

例子