目次
React ルーティングでは、一般的に使用されるコンポーネントについて詳しく説明します
ホームページ ウェブフロントエンド フロントエンドQ&A 反応ルーティングの共通コンポーネントは何ですか?

反応ルーティングの共通コンポーネントは何ですか?

Mar 21, 2022 pm 06:17 PM
react ルーティングコンポーネント

反応ルーティングで一般的に使用されるコンポーネントは次のとおりです: 1. BrowserRouter、ルーティング モードを履歴に設定します; 2. HashRouter、ルーティング モードをハッシュに設定します; 3. NavLink; 4. リンク; 5. リダイレクト; 6. Route; 7. withRouterなど。

反応ルーティングの共通コンポーネントは何ですか?

このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。

React ルーティングでは、一般的に使用されるコンポーネントについて詳しく説明します

コンポーネントとその機能:

#宣言的ジャンプNavLink宣言的ジャンプでは、ルートのアクティブ化ステータスについても合意できます宣言的ジャンプリンク宣言的ジャンプにはアクティブなステータスがありません#リダイレクト 照合して表示 Exclusive Match上位コンポーネント# Structure

コンポーネント 関数
ルーティング モード BrowserRouter 合意されたものモードは履歴です。HTML5 が提供する履歴 API を使用して、UI と URL の同期を維持します
ルーティング モード HashRouter 合意されたモードはハッシュです、URL のハッシュを使用して UI と URL の同期を維持します
Redirect Redirect~~ replace
Route コンポーネントを照合して、コンポーネントを表示します。つまり、一致が成功すると、コンポーネントは一致するコンポーネント
Switch Exclusive Match に直ちに置き換えられます。包括性を使用したくない場合は、Switch を使用してください。
withRouter ルーティングを介して切り替えられないコンポーネントでは、3 つのオブジェクトの履歴、場所、一致を props に渡します。オブジェクト (上位コンポーネント) 上で

BrowserRouter|HashRouter
  • アプリ (または他のコンポーネント)

    NavLink|Link

      Route
    • Redirect
    • Subcomponent
      • NavLink|Link
        • ルート
    ##ブラウザルーター

#属性

タイプ関数ベース名stringすべての場所のベース URL。アプリがサーバー上のサブディレクトリから提供される場合は、それをサブディレクトリとして設定する必要があります。適切な形式のベース名はスラッシュで始まりますが、スラッシュで終わることはできませんgetUserconfirmationFunctionナビゲーションを確認するために使用される関数。デフォルトでは、 が使用されます。
window.confirm #ルート

##属性タイプ

Functionルート一致パス。パス属性のないルートは常に React コンポーネントはアドレスが一致するとレンダリングされ、ルート プロパティも一緒にレンダリングされます インライン レンダリングおよびラッピング コンポーネントでは、ターゲット コンポーネントを返す呼び出しが必要です
path string |object
exact boolean と一致します。true の場合、完全なパスの一致 (/home) が必要です。ルートはデフォルトで「含まれます」(/ と /home の両方が一致)、つまり複数のルートが一致し、同時にレンダリングできることを意味します。コンポーネント
render Function

#リンク

属性toreplace#履歴レコードを置き換えるかどうか##NavLink
タイプ 関数
string | オブジェクト {pathname:,search:,hash:} ジャンプ先のパスまたはアドレス
boolean

#属性

タイプ関数string| オブジェクト{pathname:,search:,hash:}ジャンプするパスまたはアドレス履歴レコードを置き換えます要素が選択されたら、選択スタイルを設定します。デフォルト値はアクティブです要素が選択されたら、選択したスタイルを設定します# #Switchこのコンポーネントは、一致するアドレスの最初のルートまたはリダイレクトをレンダリングするために使用されます。デフォルトでは 1 つのルートのみ、排他的なルート、完全一致をレンダリングします (シナリオ: サイドバー、ガイド タブなど)。
##to
replace boolean
activeClassName string
activeStyle object

属性

タイプ

関数#ノードこのコンポーネントは、アドレスに一致する最初のルートまたはリダイレクトをレンダリングするために使用されます。1 つのルート、排他的ルート、およびデフォルトの完全一致のみをレンダリングします。 (シナリオ: サイドバーとブレッドクラム、ブート タブなど。属性
##場所 文字列オブジェクト

Redirect

タイプ関数

fromstringfromtostring オブジェクトどこへpushboolean履歴を追加booleanboolean [関連する推奨事項: Redis ビデオ チュートリアル ]
##exact
厳密一致 sensitive
大文字と小文字を区別します

以上が反応ルーティングの共通コンポーネントは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

React と RabbitMQ を使用して信頼性の高いメッセージング アプリを構築する方法 React と RabbitMQ を使用して信頼性の高いメッセージング アプリを構築する方法 Sep 28, 2023 pm 08:24 PM

React と RabbitMQ を使用して信頼性の高いメッセージング アプリケーションを構築する方法 はじめに: 最新のアプリケーションは、リアルタイム更新やデータ同期などの機能を実現するために、信頼性の高いメッセージングをサポートする必要があります。 React はユーザー インターフェイスを構築するための人気のある JavaScript ライブラリであり、RabbitMQ は信頼性の高いメッセージング ミドルウェアです。この記事では、React と RabbitMQ を組み合わせて信頼性の高いメッセージング アプリケーションを構築する方法を紹介し、具体的なコード例を示します。 RabbitMQ の概要:

React Router ユーザーガイド: フロントエンドルーティング制御の実装方法 React Router ユーザーガイド: フロントエンドルーティング制御の実装方法 Sep 29, 2023 pm 05:45 PM

ReactRouter ユーザーガイド: フロントエンドルーティング制御の実装方法 シングルページアプリケーションの人気に伴い、フロントエンドルーティングは無視できない重要な部分になりました。 React エコシステムで最も人気のあるルーティング ライブラリとして、ReactRouter は豊富な機能と使いやすい API を提供し、フロントエンド ルーティングの実装を非常にシンプルかつ柔軟にします。この記事では、ReactRouter の使用方法と具体的なコード例を紹介します。 ReactRouter を最初にインストールするには、次のものが必要です

PHP、Vue、React: 最適なフロントエンド フレームワークを選択するには? PHP、Vue、React: 最適なフロントエンド フレームワークを選択するには? Mar 15, 2024 pm 05:48 PM

PHP、Vue、React: 最適なフロントエンド フレームワークを選択するには?インターネット技術の継続的な発展に伴い、フロントエンド フレームワークは Web 開発において重要な役割を果たしています。 PHP、Vue、React は 3 つの代表的なフロントエンド フレームワークであり、それぞれに独自の特徴と利点があります。使用するフロントエンド フレームワークを選択するとき、開発者はプロジェクトのニーズ、チームのスキル、個人の好みに基づいて情報に基づいた決定を下す必要があります。この記事では、PHP、Vue、React の 3 つのフロントエンド フレームワークの特徴と用途を比較します。

Java フレームワークとフロントエンド React フレームワークの統合 Java フレームワークとフロントエンド React フレームワークの統合 Jun 01, 2024 pm 03:16 PM

Java フレームワークと React フレームワークの統合: 手順: バックエンド Java フレームワークをセットアップします。プロジェクト構造を作成します。ビルドツールを設定します。 React アプリケーションを作成します。 REST API エンドポイントを作成します。通信メカニズムを構成します。実際のケース (SpringBoot+React): Java コード: RESTfulAPI コントローラーを定義します。 React コード: API によって返されたデータを取得して表示します。

React を使用して応答性の高いバックエンド管理システムを開発する方法 React を使用して応答性の高いバックエンド管理システムを開発する方法 Sep 28, 2023 pm 04:55 PM

React を使用して応答性の高いバックエンド管理システムを開発する方法 インターネットの急速な発展に伴い、日々の業務を処理するために効率的で柔軟で管理が容易なバックエンド管理システムを必要とする企業や組織が増えています。現在最も人気のある JavaScript ライブラリの 1 つである React は、ユーザー インターフェイスを構築するための簡潔で効率的かつ保守しやすい方法を提供します。この記事では、React を使用して応答性の高いバックエンド管理システムを開発する方法と、具体的なコード例を紹介します。まず React プロジェクトを作成します

Vue.js vs. React:プロジェクト固有の考慮事項 Vue.js vs. React:プロジェクト固有の考慮事項 Apr 09, 2025 am 12:01 AM

VUE.JSは、中小規模のプロジェクトや迅速な反復に適していますが、Reactは大規模で複雑なアプリケーションに適しています。 1)Vue.jsは使いやすく、チームが不十分な状況やプロジェクトスケールが小さい状況に適しています。 2)Reactにはより豊富なエコシステムがあり、高性能で複雑な機能的ニーズを持つプロジェクトに適しています。

HTMLにおけるReactの役割:ユーザーエクスペリエンスの向上 HTMLにおけるReactの役割:ユーザーエクスペリエンスの向上 Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1)JSXはHTMLを埋め込み、開発をより直感的にします。 2)仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3)保守性を向上させるコンポーネントベースの管理UI。 4)国家管理とイベント処理は、インタラクティブ性を高めます。

反応にはどのようなクロージャがありますか? 反応にはどのようなクロージャがありますか? Oct 27, 2023 pm 03:11 PM

React には、イベント処理関数、useEffect や useCallback、上位コンポーネントなどのクロージャがあります。詳細な紹介: 1. イベント処理関数のクロージャ: React では、コンポーネント内でイベント処理関数を定義すると、関数はクロージャを形成し、コンポーネントのスコープ内のステータスとプロパティにアクセスできます。このようにして、コンポーネントの状態とプロパティをイベント処理関数で使用して対話型ロジックを実装できます; 2. useEffect や useCallback のクロージャなど。

See all articles