REACT ルーター - TECHCODEVIEW.COM

反応ルーター は、シングルページアプリケーション (SPA) を構築するために不可欠なツールです。ユーザーがセクション間を楽に移動し、Web サイトを流動的なアプリのように体験できることを想像してみてください。React Router がそれを可能にし、楽しいユーザーエクスペリエンスと最新の Web プレゼンスへの道を切り開きます。 React Web サイトでは、ユーザーが移動するたびに大きなページがリロードされる必要はありません。

この記事は、React Router の世界へのガイドとして役立ち、React Router の概念とその機能について学びます。スムーズなナビゲーションの可能性を解き放ち、React プロジェクトを次のレベルに引き上げることにご期待ください。

Reactルーターとは何ですか?
React Router を使用する手順
React ルーターのコンポーネント
Reactルーターの実装

React には組み込みのルーティングがないため、React JS Router を使用すると、React でのルーティングのサポートと、マルチページアプリケーションのさまざまなコンポーネントへのナビゲーションが可能になります。対応するルートと割り当てられた URL のコンポーネントをレンダリングします。

Reactルーターとは何ですか?

反応ルーター ルーティング用の標準ライブラリです反応する。これにより、React アプリケーション内のさまざまなコンポーネントのビュー間のナビゲーションが可能になり、ブラウザー URL の変更が可能になり、UI と URL の同期が維持されます。 React Router がどのように動作するかを理解するために、React 用の簡単なアプリケーションを作成してみましょう。アプリケーションには 3 つのコンポーネントが含まれます。 ホームコンポーネント 、 コンポーネントについて 、そしてその 接触部品 。 React Router を使用してこれらのコンポーネント間を移動します。

React Router を使用する手順

ステップ1： 反応プロジェクトを初期化します。この投稿をチェックしてください React アプリのセットアップ

ステップ2： アプリケーションにreact-routerをインストールし、ターミナルに次のコマンドを書き込みます。

npm i react-router-dom

ステップ 3: Reactルーターのインポート

import { BrowserRouter, Routes, Route } from 'react-router-dom';

フォルダー構造:

ディレクトリ構造

更新された依存関係 パッケージ.json ファイル。

'dependencies': {  '@testing-library/jest-dom': '^5.17.0',  '@testing-library/react': '^13.4.0',  '@testing-library/user-event': '^13.5.0',  'react': '^18.2.0',  'react-dom': '^18.2.0',  'react-router-dom': '^6.22.1',  'react-scripts': '5.0.1',  'web-vitals': '^2.1.4' },

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

React Router の主なコンポーネントは次のとおりです。

ブラウザルーター : BrowserRouter は、HTML5 履歴 API (pushState、replaceState、popstate イベント) を使用して UI と URL の同期を保つルーター実装です。これは、他のすべてのコンポーネントを格納するために使用される親コンポーネントです。
ルート : v6 で導入された新しいコンポーネントおよびコンポーネントのアップグレードです。 Routes over Switch の主な利点は次のとおりです。
- 相対と
- ルートは、順番に通過するのではなく、最適な一致に基づいて選択されます。
ルート： Route は、パスが現在の URL と一致する場合に何らかの UI をレンダリングする、条件付きで表示されるコンポーネントです。
リンク： リンクコンポーネントは、さまざまなルートへのリンクを作成し、アプリケーション周辺のナビゲーションを実装するために使用されます。 HTML アンカータグのように機能します。

Reactルーターの実装

例：この例は、react-router-dom を使用した Home、About、Contact コンポーネントへのナビゲーションを示しています。

JavaScript

  // Filename - App.js import React, { Component } from 'react'; import {  BrowserRouter as Router,  Routes,  Route,  Link, } from 'react-router-dom'; import Home from './component/home'; import About from './component/about'; import Contact from './component/contact'; import './App.css'; class App extends Component {  render() {  return (               家    
      私たちについて    
      お問い合わせ    
   
      }>    }>    }>       
   );  デフォルトのアプリをエクスポートします。>

JavaScript

  // Filename - component/home.js import React from 'react'; function Home() {  return  オタクの世界へようこそ! 
;デフォルトのホームをエクスポートします。>

JavaScript

  // Filename - component/about.js import React from 'react'; function About() {  return (      techcodeview.com は、オタク向けのコンピューター サイエンス ポータルです。 
当社について詳しくは、以下をご覧ください。 ここで私たちを見つけることができます: 
techcodeview.com 
5階と6階、ロイヤルカプソンズ、A-118、 
セクター-136、ノイダ、ウッタルプラデーシュ州 (201305) );デフォルトの連絡先をエクスポートします。>

アプリケーションを実行する手順: ターミナルを開き、次のコマンドを入力します。