내부에 외부 URL과 HTML 버튼 태그 를 사용하고 싶을 때 Next.jsLink 에서 간단한 구성 요소가 작동하지 않는다는 사실에 매우 놀랐 습니다.
아래에서 내가 어떻게 문제를 해결했는지 확인할 수 있습니다.
접근 번호 1 :
<Link href="https://stackoverflow.com/">
<button>StackOverflow</button>
</Link>
접근 번호 2 (프로토콜없는 링크) :
<Link href="//stackoverflow.com/">
<button>StackOverflow</button>
</Link>
접근 번호 3 (프로토콜이없고 링크 속성 prefetch이 false또는 짝수로 설정된 링크 true) :
<Link href="//stackoverflow.com/" prefetch={false}>
<button>StackOverflow</button>
</Link>
중요 사항
물론 언급 된 경우는 URL이 내부 일 때 작동합니다.
<Link href="/stackoverflow">
<button>StackOverflow</button>
</Link>
또는 HTML 버튼 태그를 다음과 같이 HTML A 태그 로 변경할 때 :
<Link href="//stackoverflow.com/">
<a>StackOverflow</a>
</Link>
필자의 경우 HTML 버튼 태그 또는 Next.js 링크 구성 요소 내부의 다른 UI 구성 요소를 사용하고 싶습니다.
1. Next.js Link 컴포넌트 내부의 UI 컴포넌트 솔루션.
Next.js 문서를 더 자세히 연구했으며 Link 구성 요소 내부의 내부 UI 구성 요소 ( Semantic UI , Material UI , Reactstrap 등)에 대한 외부 링크를 만드는 데 매우 유용한 속성을 찾았습니다 .
간단한 Semantic UI 버튼 구성 요소를 예로 들어 보겠습니다. 우리가 속성 사용해야 Next.js 링크 구성 요소에 외부 링크를 추가하려면 passHref을 . 이 속성은 false기본적으로 로 설정됩니다 . 이 속성은 Link가 href속성을 자식 에게 강제로 보냅니다 .
import { Button } from 'semantic-ui-react';
import Link from 'next/link';
const Example = () => (
<Link href="https://stackoverflow.com/" passHref={true}>
<Button>StackOverflow</Button>
</Link>
)
export default Example;
2. HTML 요소에 대한 솔루션 (태그 A와 다름)
Next.js 문서에서 아래 문장을 찾을 수 있습니다.
외부 URL 및 / pages를 사용한 경로 탐색이 필요하지 않은 링크는 Link로 처리 할 필요가 없습니다. 대신 이러한 경우에는 앵커 태그를 사용하십시오.
그리고 나는 그것이 명백하다고 써야하는데,이 경우 HTML 버튼과 같은 다른 태그를 사용해야한다면 onClickLink 컴포넌트없이 이벤트 를 사용해야합니다 . 위의 코드는 다음과 같습니다.
const clickHandle = () => {
document.location.href = 'https://stackoverflow.com/';
}
const Example = () => (
<button onClick={clickHandle}>StackOverflow</button>
)
export default Example;
이런 종류의 설명과 접근 방식이 비슷한 혼란에 시달리는 사람에게 도움이되기를 바랍니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다