logo

TechCodeview

反応ルーター

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

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

文字列から整数への変換

目次



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

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

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

フレームtkinter

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 は、オタク向けのコンピューター サイエンス ポータルです。
当社について詳しくは、以下をご覧ください。  
// Filename - component/contact.js import React from 'react'; function Contact() {  return (   
ここで私たちを見つけることができます: 
techcodeview.com 
5階と6階、ロイヤルカプソンズ、A-118、 
セクター-136、ノイダ、ウッタルプラデーシュ州 (201305)
);デフォルトの連絡先をエクスポートします。>>
  
    アプリケーションを実行する手順:    ターミナルを開き、次のコマンドを入力します。
 
npm start>
    出力：    ブラウザを開くと、URL にプロジェクトが表示されます。      http://ローカルホスト:3000/      。これで、リンクをクリックしてさまざまなコンポーネントに移動できるようになりました。 React Router は、アプリケーション UI を URL と同期させます。
Java列挙型

  
最後に、React Router を使用して React アプリケーションにナビゲーションを実装することに成功しました。