React ルーティング リンク構成の詳細

React ルーティング リンク構成の詳細

1. 属性へのリンク

(1)ルーティングパスを配置する
(2)指定された形式でオブジェクトを配置する
{パス名:"/xx",検索:'?キーと値のペア',ハッシュ:"#xxx",状態:{キーと値のペア}}
パス名、検索、ハッシュを URL パスに自動的に連結します。state は渡されたパラメータであり、props を出力することでオブジェクト内の情報を表示できます。
this.props.location.state.状態のデータを取得するためのキー名

2. リンクの置換属性

置換を追加すると、ジャンプ前のページが現在のページに置き換えられ、現在のページのみがスタックにプッシュされます。

3. リンクパラメータ転送

パスの後に「/key value」を追加します
ルートとパスの後に「/:キー名」を追加します
コンポーネント内の関数コンポーネント: 最初に props パラメータを渡し、次に props.match.params.key 名クラスコンポーネント: this.props.match.params.key 名

コード例:

React をインポートします。{Component} を 'react' からインポートします。
// 'react-router-dom' から {Route、BrowserRouter、Link} をインポートします
// BrowserRouter を Router に名前変更
'react-router-dom' から { BrowserRouter を Router、Link、Route としてインポートします。
'antd' から Button をインポートします。
'./App.css' をインポートします。

関数ホーム()
{
  戻る(
      <div>管理者ホームページ</div>
    )
}

関数Me(props)
{
  console.log(プロパティ)
  戻る(
      <div>管理者マイ</div>
    )
}

関数 Product(props)
{
  戻る(
      <div>管理者製品ページ:{props.match.params.id}</div>
    )
}

デフォルトクラスAppをエクスポートし、Componentを拡張します。
   コンストラクタ()
    {
      素晴らしい();
    }
    与える()
    {
    パスがオブジェクト形式で記述され、以下と同じである場合、パス名、検索、ハッシュは URL パスに自動的に連結され、状態はコンポーネントに渡されるデータになります*/
      obj={pathname:"/me",search:'?username=admin',hash:"#abc",state:{msg:'hello'}}とします。
      戻る(
        <div id='アプリ'>
      *複数の BrowserRouter を配置できます*/
          <ルーター>
        
        コンポーネントは HTML コンテンツも返すため、コンポーネントとして機能する関数を通じて HTML コンテンツを直接返すことはできますが、HTML コンテンツを直接記述することはできません*/
          <div>  
            <Route path="/" exact component={()=><div>ホーム</div>}></Route>
            <ルート パス="/product" コンポーネント={()=><div>製品</div>}></ルート>
            <ルート パス="/me" コンポーネント={()=><div>me</div>}></ルート>
          </div>
          {/*<Route path="/" component={function(){return <div>首页2</div>}}></Route>*/

          </ルーター>
        

          
          * * BrowserRouter 内に他のコンテンツをラップするためのルート コンテナは 1 つだけです */
        *basename='/xx' を追加した後、リンクをクリックして他のルートにジャンプすると、URL はルート名の先頭に /xx を追加するため、ルート パスと管理者が追加されたルート パスの両方がルートと一致するようになります*/
          <ルーターのベース名='/admin'>
            <div>
                <div className='nav'>
                    <Link to='/'>ホーム</Link>
                    <Link to='/product/123'>製品</Link>
                  対応するコンポーネントで props を出力して渡されたオブジェクトの情報を表示したり、replace を追加してジャンプ前のページを現在のページに置き換えたり、現在のページのみをスタックにプッシュしたりできます*/
                    <Link to={obj} replace>パーソナル センター</Link>
                </div>

                <ルート パス="/" 正確なコンポーネント = {ホーム}></ルート>
                <ルート パス="/product/:id" コンポーネント={製品}></ルート>
                <ルート パス="/me" 正確なコンポーネント = {Me}></ルート>
            </div>
          </ルーター>

        </div>
        
      )
    }
}

これで、React Routing Link の詳細設定に関するこの記事は終了です。React Routing Link に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Reactルーティングの各バージョンのリダイレクト方法の詳細な説明
  • react-router JS 制御ルーティングジャンプの例
  • Reactがコンポーネント内のルーティングパラメータを取得する方法の詳細な説明
  • react-router4でネストされたルートを使用する方法
  • React-router4ルート監視の実装
  • ルーティング許可制御を実装するためのReact router4+reduxメソッド
  • React-router v4 ルーティング設定方法の概要
  • React Router 4.0 以降のルーティング アプリケーションの詳細な説明

<<:  ウェブデザインにおけるキーワード設計手法の紹介

>>:  MySQL初心者のための基本操作のまとめ

推薦する

実用的なウェブオンラインツール12選

1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...

ミニプログラム録画機能の実装

序文ミニプログラムを開発する過程では、録音機能を実装し、録音を再生し、録音をサーバーにアップロードす...

Redhat 8.0 システムのインストール方法に関するグラフィック チュートリアル (初心者には必須)

目次1. はじめに2. インストール01. 新しい仮想マシンを作成する02. システムをインストール...

Vueページの初回読み込み最適化の全プロセス

目次序文1. 画像の最適化2. .mapファイルの生成を無効にする3. ルーティングの遅延読み込み4...

Mapper SQL ステートメント フィールドとエンティティ クラス属性名の関係は何ですか?

背景: 1. データベースに通知テーブルがある あなたは見ることができますgmt_create、通知...

Vue が配列の変更を監視できない問題の解決方法

目次1. Vueリスナー配列2. vueが配列の変更を監視できない状況1. Vueリスナー配列Vue...

シンプルなカルーセルの最も完全なコード分析を実装するJavaScript(ES6オブジェクト指向)

この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...

vue3 watch と watchEffect の使い方と違い

1.リスナーを見る時計のご紹介 'vue' から { ref, reactive, ...

MySQLで自動作成時間と変更時間を設定する方法の例

この記事では、MySQL の自動作成時刻と変更時刻を設定する方法について説明します。ご参考までに、詳...

Linuxでのaliasコマンドの使い方の詳細な説明

1. 別名の使用alias コマンドは、コマンドのエイリアスを設定するために使用されます。このコマン...

MySQL 8.0 の非表示列に対する基本操作

目次01 非表示の列を作成する02 非表示の列に対する基本操作03 非表示の列メタデータ04 主キー...

yum から docker インストール パッケージをダウンロードし、オフライン マシンにインストールする例の詳細なコード

1. ネットワークマシンでは、デフォルトのcentosyumソースを使用します [root@kole...

CSS3 アニメーション – ステップ機能の説明

最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメ...

2つのシンプルなメニューナビゲーションバーの例

メニューバーの例 1: コードをコピーコードは次のとおりです。 <!DOCTYPE html ...