React ルーターは、単一ページのアプリケーションで複数のルートをナビゲートするために使用される、react の上に構築されたライブラリです.したがって、ユーザーはアプリを更新することなく別のコンポーネントに移動できるため、読み込み時間が短縮され、ユーザー エクスペリエンスが向上します.

反応ルーターの必要性は何ですか?

従来、ユーザーが新しい Web ページへのリンクをクリックすると、サーバーからの新しいデータによって Web ページ全体が書き換えられ、サイトが強制的に更新され、まったく別のページが表示されていました.このような種類のアプリは、マルチページ アプリと呼ばれます.ページの更新に時間がかかるだけでなく、ユーザーはブラウザでページが再描画されるのを目にします.これはユーザー エクスペリエンスが良くないだけでなく、アプリの状態を管理するのも難しくなります.

解決策は何ですか?

ソリューションは、マルチページ アプリからシングルページ アプリに変わりつつあります.このレンダリング手法では、まったく新しい Web ページに完全に移動する必要はありません.代わりに、まったく新しい Web ページに移動することなく、さまざまなコンポーネント (ビューと呼ばれる) が同じページに動的に読み込まれます.この単一ページ アプリの概念は、Facebook、Twitter、Instagram などの一般的な Web アプリで使用されています.

そのすべてを達成するには、react-router ライブラリが必要です

React ルーター コンポーネント

react-router ライブラリには、次の 3 つの主要コンポーネントがあります.
• ルーター
• ルートマッチャー
• ナビゲーション リンク

ルーター

React ルーターには、HashRouter と BrowseRrouter という 2 つの主要なルーティング コンポーネントがあります.これらのコンポーネントは、ナビゲーション リンクとルート マッチャーを使用できるルーティング領域を定義します.

• Browserouter は、データベースを使用し、情報が頻繁に変更される動的な Web ページで使用されます.このルーティング手法では、HTML 履歴 API を使用して、ユーザーが訪れた場所を保存およびアクセスします.

• 一方、Hashrouter は、静的 Web ページのルーティングに使用されます.現在の場所は、URL のハッシュ部分に格納されます.したがって、URL は次のようになります. http://example.com#/about.ただし、 # は決して送信されません
サーバー.したがって、特別な意味はありません.

ナビゲーション リンク

React ルーターは、リンクの作成と変更に使用される タグを提供します. HTML のプレースアンカータグ () で使用されます.ナビゲーション リンクは、値が URL を指定する to 属性を受け取ります.
構文;
<Link to="/about">About</Link>
は、react-router のナビゲーション リンクでもあり、現在の場所がルートと一致する場合にスタイルを追加するために使用される特別なタイプの コンポーネントです.このタグにアクセスすると、アクティブなクラスが自動的に継承されます.アクティブなクラスのスタイルは、スタイルシートで定義する必要があります.
<NavLink to="/about">About</NavLink>

ルーターマッチャー

ルーターマッチャーは、特定の URL にアクセスしたときに表示されるコンポーネントを決定するのに役立ちます. 2 つの主なルート マッチング コンポーネントは <Route> と <Switch> です.
• <Route> は、タグで指定された URL とユーザー インターフェイスに表示されるコンポーネントとの間の接続を判断するのに役立ちます.コンポーネントへのパス名を指定する path 属性があります.
• <Switch> は、要求された URL に一致するパスをその子を介して検索し、他のパスを見つけても無視します.

 <div className="content">
          <Switch>
            <Route path="/about"> <About /></Route>
            <Route path="/contact"><Contact /></Route>
            <Route exact path="/"><Home /></Route>
          </Switch>
  </div>

最後に

これは、react ルーターの基本の簡単な紹介でした.ただし、ソフトウェア開発者の良い習慣の 1 つは、練習して手を汚すことです.したがって、これも確認することをお勧めします.