여기도 마찬가지입니다. 다음과 같은 사용자 지정 구성 요소를 사용하면 오류가 발생합니다.

        <Link href="/href">
          <Button
            type="custom"
            color="#FCFCFC"
          >
             buttonText
          </Button>
        </Link>

이는 구성 요소를 자식으로 사용할 때만 발생합니다. 예를 들어 경고를 제공하지 않습니다.

        <Link href="/href">
          <button
            type="custom"
            color="#FCFCFC"
          >
            buttonText
          </button>
        </Link>

        <Link href="/href">
          <a>
            <Button
              type="custom"
              color="#FCFCFC"
            >
              buttonText
            </Button>
          </a>
        </Link>

이 버그를 해결할 방법이 있습니까? 우리는 타이프 스크립트 지원과 같은 일부 기능을 실제로 활용하고 싶은 경우 9로 이동하는 것이 차단되었습니다. 9.0.3으로 충돌 한 것을 알아 차 렸습니다. : /

다음과 같이 일시적으로 음소거를 시도 할 수 있습니다.

// TODO: Muting error, fix as soon as zeit/next.js/issues/7915 resolved
const originalError = console.error;

console.error = (...args) => {
  if (/Warning.*Function components cannot be given refs/.test(args[0])) {
    return;
  }
  originalError.call(console, ...args);
};

여기에도 같은 문제가 있습니다.

<Link/> 를 사용하여 사용자 지정 구성 요소를 래핑하는 경우 다음과 같이 ref 전달할 수 있습니다.

const CustomComponent = React.forwardRef(function CustomComponent(props, ref) {
  return (
    <div/>
  );
});

<Link href={"/"}>
  <CustomComponent/>
</Link>

경고가 사라집니다.

9.0.4-canary.2 업데이트했지만 여전히 본체에 경고가 표시됩니다. 내가 뭔가를 놓치고 있습니까?

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Link`.

@ th0th 구성 요소를 React.forwardRef 래핑해야합니다. 이 같은:

import React from 'react'
import Link from 'next/link'

const CustomComponent = React.forwardRef((props, ref) => (
  <a ref={ref} {...props}>
    Click
  </a>
))

export default () => (
  <Link href='/' passHref>
    <CustomComponent/>
  </Link>
)

Link 내에서 사용되는 모든 기능 구성 요소를 수동으로 래핑 하시겠습니까? 이를위한 더 쉽고 덜 반복적 인 솔루션이 있어야하지 않습니까? 적어도 <Link href="/" forwardRef>...</Link> ?

@nickluger에 동의하면 반 직관적으로 보입니다.

다른 모든 라이브러리가 동일한 방식으로 forwardRef 속성을 구현해야합니까? 아니면 리 액트 크리에이터는 개발자가 forwardRef 속성을 구현하는 대신 React.forwardRef 함수를 사용할 것이라고 생각했을까요?

예 @nickluger에 동의합니다. Link 내부의 모든 구성 요소에 대해 수동으로이 작업을 수행하는 것은 고통입니다.

이 문제를 다시 열고 (@ijjk) 이름을 변경해야합니까? 아니면 누군가 이미 새 문제를 열었습니까?

여기도 마찬가지입니다. 다음과 같은 사용자 지정 구성 요소를 사용하면 오류가 발생합니다.

        <Link href="/href">
          <Button
            type="custom"
            color="#FCFCFC"
          >
             buttonText
          </Button>
        </Link>

이는 구성 요소를 자식으로 사용할 때만 발생합니다. 예를 들어 경고를 제공하지 않습니다.

        <Link href="/href">
          <button
            type="custom"
            color="#FCFCFC"
          >
            buttonText
          </button>
        </Link>

        <Link href="/href">
          <a>
            <Button
              type="custom"
              color="#FCFCFC"
            >
              buttonText
            </Button>
          </a>
        </Link>

콘솔 오류가 발생할 가능성이 높습니다.

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

Next JS를 업그레이드 할 때이 문제가 발생했습니다. 가는 길에 수정이 있습니까?

forwardRef를 사용하고 구성 요소를 래핑하는 방법을 잘 모르겠습니다. 내 button.js 파일은 현재 다음을 내 보냅니다 ....

const Button = (props) => {
    return (<stuff />)
}

export default React.memo(Button)

위를 참조하십시오. https://github.com/zeit/next.js/issues/8962 에서 후속 작업을 열었습니다.

Next JS를 업그레이드 할 때이 문제가 발생했습니다. 가는 길에 수정이 있습니까?

forwardRef를 사용하고 구성 요소를 래핑하는 방법을 잘 모르겠습니다. 내 button.js 파일은 현재 다음을 내 보냅니다 ....

const Button = (props) => {
    return (<stuff />)
}

export default React.memo(Button)

이 경우, 당신은 할 수 있어야합니다

import {forwardRef} from 'react';
const Button = forwardRef(props, ref) => {
    return (<stuff ref={ref} />)
}

forwardRef 부분. 문서에는 https://nextjs.org/docs#forcing -the-link-to-expose-href-to-its-child가 언급되어 있지만 시도하지는 않았습니다. 나는 이것을하는 것을 발견했다

            <Link
              href={href}
            >
              <a>
                {text}
              </a>
            </Link>

작동합니다 (매우 이상해 보임에도 불구하고).

9.0.2에서이 문제 발생

<a></a> 사용하면 작동 할 수 있지만 a11y 및 이와 유사한 것을 사용할 때 "must have href"등과 같은 다른 오류가 발생합니다.

편집 : 이것을 알아 내기 위해 15 분을 보냈는데, 그것은 매우 지루하고 시간 낭비이며 경고에도 불구하고 제대로 작동하는 것 같습니다.

개인적으로 https://github.com/zeit/next.js/issues/7915#issuecomment -511792629로

반응 조각 을 베어링 래퍼로 사용하는이 솔루션은 어떻습니까?

import React, { Fragment, useRef } from 'react';
import { MyFunctionalComponent } from './my-functional-component';

const App = props => {
  const myRef = useRef();

  return ( 
    <Link href={href}>
      <Fragment>
          <MyFunctionalComponent ref={myRef} />
      </Fragment>
    </Link>
  );
}

<MyFunctionalComponent> 는 ref를 전달합니다.

import React, { forwardRef } from 'react';

const MyFunctionalComponent = forwardRef(props, ref) => (
  <div ref={ref} />
);

이는 출력 ( <div /> )에 추가 HTML 래퍼를 추가하지 않으며 관련 오류를 트리거하지 않아야합니다.

@ hill84 흥미롭지 만 myRef 출처는 어디입니까?

@Vadorequest 이전 댓글에 자세한 내용을 추가했습니다.

@ hill84 의 제안을
```
const ButtonLink : FC= ({children, href, ... props}) => (
< >>);

@ hill84 의 제안을

const ButtonLink: FC<ButtonLinkProps> = ({ children, href, ...props }) => (
  <Link href={href}>
    <><Button link {...props}>{children}</Button></>
  </Link>
);

<><Component/></> 하지만 Link가 작동하지 않습니다. 대신 <div></div> 를 사용해야합니다.

함수가 구성 요소 대신 소품으로 객체를 반환하는 솔루션을 제안합니다.

const propsUserBtn = user => ({
    className: "h-10 w-10 font-black rounded-full bg-orange-200 text-teal-700",
    title: user.first_name + ' ' + user.last_name,
    children: (user.first_name.charAt(0) + user.last_name.charAt(0)).toUpperCase()
})

<Link href='/profile'>
    <button { ...propsUserBtn(user) } />   
</Link>

확인, 작동합니다!

이 심판이 왜 필요한가요? passHref 가 <Link /> 에서 사용될 때 기본 래핑 된 구성 요소에서 href 의 올바른 배치를 보장하는 것입니까?

내 사용자 정의 구성 요소가 루트에 <a> 있고 어쨌든 href가 올바르게 적용되고 있음을 알 수 있기 때문에 이것은 매우 성가신 일 입니다. 루트에 앵커가 있고이 전체 ref 디자인 지정을 피하십시오.

React.forwardRef 은 사람들이 구현하도록 강요하고 내 린터로 지옥을 플레이하는 끔찍하게 성가신 일입니다 😞

또는 구성 요소에서 href 의 위치를 ​​지정해야하는 경우 적어도 옵트 인 기능이어야합니다. <Link href="/" passHref useRef /> ?

참조를 사용자 지정 구성 요소로 전달하기 위해 다른 모듈을 만들어야하는 것은 좋은 솔루션이며 너무 반복적이라고 생각하지 않습니다.

이 문제를 처리하는 데 사용하는 방법은 @ namlq93에서 제안한 것처럼 div 요소로 사용자 지정 구성 요소를 래핑하는 것이지만 깨끗하지 않은 것 같습니다.

여기도 마찬가지입니다. 다음과 같은 사용자 지정 구성 요소를 사용하면 오류가 발생합니다.

        <Link href="/href">
          <Button
            type="custom"
            color="#FCFCFC"
          >
             buttonText
          </Button>
        </Link>

이는 구성 요소를 자식으로 사용할 때만 발생합니다. 예를 들어 경고를 제공하지 않습니다.

        <Link href="/href">
          <button
            type="custom"
            color="#FCFCFC"
          >
            buttonText
          </button>
        </Link>

        <Link href="/href">
          <a>
            <Button
              type="custom"
              color="#FCFCFC"
            >
              buttonText
            </Button>
          </a>
        </Link>

작동합니다, 친구 감사합니다 !!

비슷한 문제가 있습니다

아직 거기

https://nextjs.org/docs/api-reference/next/link#if -the-child-is-a-function-component

이거 슬프네.

얼마전에 NextJS 컨퍼런스를보고 "와우 넥스트가 미래 다"라고 생각했습니다. 저는 Next와 Vercel 생태계를 정말 좋아하고 솔직히 그렇게 말할 수 있고 Next의 옹호자가되고 싶습니다. 그러나 이와 같은 문제가 종결되고 해결되지 않으면 그렇게하기가 어렵습니다. 나는 특히 라우터와 관련된 문제 전체에서 이러한 유형의 패턴을 여러 번 보았습니다.

사용자 측에서이 문제에 대한 3 가지 해결책이 있으며 그중 어느 것도 훌륭한 DX가 아닙니다.

1. 권장되는 방법 React.forwardRef. React.forwardRef 구성 요소를 래핑합니다. 이것은 매우 반복적 일 수 있습니다.
2. div , span , a 등과 같은 태그로 기능 구성 요소를 래핑합니다.
3. Link 대신 useRouter를 가져와 router.push

어떤 솔루션을 사용하든 모두 이상하며이 문제 또는 문서 에 링크 된 주석이 필요하여 동료 / 기여자에게 실수로 제거 / 정리를 방지하는 데 필요한 이유를 설명해야합니다.

이 문제는 논의를 위해 재개되어야한다고 생각합니다.