Я использую 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 />
-2
Maciej Kuliński 14 Апр 2020 в 14:17

2 ответа

Лучший ответ

Нет никакого собственного способа сделать это с помощью 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 для отправки объекта, а затем для его преобразования в строку.

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

Codesandbox

0
lndgalante 14 Апр 2020 в 11:53

«Ссылка также может получить объект URL и автоматически отформатирует его для создания строки URL»

Так что вы можете использовать instad href="", это href={{ pathname, query }} https://nextjs.org/docs/api-reference/ следующая / ссылка # с - url- объекта

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 } }}>

Примере

0
Alessio Marchi 16 Апр 2020 в 00:33