React Router の外部リンクに関連する主な問題は、異なるページ間を移動するときに予期しない動作を引き起こす可能性があることです。 たとえば、ユーザーが React Router ページで外部リンクをクリックすると、ブラウザーはアプリケーション内の新しいページにルーティングするのではなく、現在のページから離れて移動します。 これは、ページ間のスムーズな遷移を期待しているユーザーに混乱とフラストレーションをもたらす可能性があります。 さらに、検索エンジンは外部ソースからのコンテンツを適切にインデックス化できない可能性があるため、外部リンクも SEO の問題を引き起こす可能性があります。
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. この行は、react-router-dom ライブラリから Link コンポーネントをインポートします。
2. この行は、クリックすると「https://www.example.com」にリダイレクトするリンク要素を作成し、新しいページにリファラー情報を送信せずに新しいタブで開きます。 リンクのテキストは「外部リンク」になります。
外部リンクとは
React Router の外部リンクは、ユーザーをアプリケーションの外部のページに移動させるリンクです。 これは、外部 Web サイトまたは別のアプリケーションである可能性があります。 外部リンクは、アプリケーション内のコンテンツに関連する追加情報またはリソースをユーザーに提供するために使用されます。 また、ユーザーを他のアプリケーションや Web サイトに誘導してさらに探索する方法としても使用できます。
React Router で外部リンクを追加する方法
React Router で React Router を使用して外部リンクを追加するのは簡単なプロセスです。 まず、react-router-dom パッケージから Link コンポーネントをインポートする必要があります。 次に、Link コンポーネントを使用して、外部 URL へのリンクを作成できます。 リンクを作成するための構文は次のようになります。
たとえば、Google へのリンクを作成する場合は、次のようになります。
でログイン
リンクを作成したら、ターゲット属性やレル属性などの追加の小道具を追加して、アクセシビリティとセキュリティを向上させることができます。 例えば：
でログイン
