web-dev-qa-db-ja.com

Linkコンポーネントを使用する場合、Next.jsで外部リンクが機能しない

単純なLinkコンポーネントが Next.js で機能しておらず、外部URLと内部で HTML Buttonタグ を使用していることに驚かされました。

以下に、私が問題を解決しようとした方法を示します。

アプローチ番号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>
_

私の場合、Next.jsリンクコンポーネント内でHTMLボタンタグまたはその他のUIコンポーネントを使用します。

javascripthtmljsxnext.jsuicomponents
4
Mario Boss

1。 Next.jsリンクコンポーネント内のUIコンポーネントのソリューション

私はNext.jsのドキュメントを詳細に調べており、内部UIコンポーネントの外部リンクを作成するための非常に便利な属性を見つけました（ セマンティックUI 、 Material UI 、- Reactstrap など）Linkコンポーネント内。

例として、単純なセマンティック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ボタンを使用する必要がある場合は、LinkコンポーネントなしでonClickイベントを使用する必要があります。上記のコードは次のようになります。

const clickHandle = () => {
  document.location.href = 'https://stackoverflow.com/';
}

const Example = () => (
  <button onClick={clickHandle}>StackOverflow</button>
)

export default Example;

このような説明とアプローチが、同様の混乱に苦しむ人に役立つことを願っています。

5
Mario Boss

Linkコンポーネントは、Nextアプリ内のページ間のリンク専用です。外部URLの引き渡しはサポートされていないため、このセクションを含む this page にリンクするエラーが発生します。

このエラーが発生した理由

Next.jsは、next/linkを介してインポートされたコンポーネント、Router（Component）のラッパー、および今度はフックuseRouter（）を介して利用できるルーターを提供します。これらのいずれかを使用する場合、それらは内部ナビゲーション、つまり同じNext.jsアプリケーション内のページ間を移動するためにのみ使用されることが想定されています。

内部以外のhrefをnext/linkコンポーネントに渡したか、Router＃PushまたはRouter＃replaceを呼び出しました。

無効なhrefには、外部サイト（ https://google.com ）とmailto：リンクが含まれます。以前は、これらの無効なHREFの使用は気付かれなかったかもしれませんが、予期しない動作を引き起こす可能性があるためです。開発中の警告を表示します。

内部で<a>をレンダリングすると、hrefはそれに渡され、ネイティブブラウザの動作を使用して期待どおりに動作しますが、他の要素はそれを使用できないため、その場合は自分で処理する必要があります。

あなたが達成しようとしていることを検討することをお勧めします-<a>タグの使用の何が問題になっていますか？それは仕事に適したツールのようです。

0
velvetkevorkian