1. 属性へのリンク(1)ルーティングパスを配置する 2. リンクの置換属性置換を追加すると、ジャンプ前のページが現在のページに置き換えられ、現在のページのみがスタックにプッシュされます。 3. リンクパラメータ転送パスの後に「/key value」を追加します コード例: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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...
序文ミニプログラムを開発する過程では、録音機能を実装し、録音を再生し、録音をサーバーにアップロードす...
目次1. はじめに2. インストール01. 新しい仮想マシンを作成する02. システムをインストール...
目次序文1. 画像の最適化2. .mapファイルの生成を無効にする3. ルーティングの遅延読み込み4...
背景: 1. データベースに通知テーブルがある あなたは見ることができますgmt_create、通知...
目次1. Vueリスナー配列2. vueが配列の変更を監視できない状況1. Vueリスナー配列Vue...
この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...
1.リスナーを見る時計のご紹介 'vue' から { ref, reactive, ...
この記事では、MySQL の自動作成時刻と変更時刻を設定する方法について説明します。ご参考までに、詳...
Windows 2003+IIS6 の fastcgi 構成ファイル fcgiext.ini を最適...
1. 別名の使用alias コマンドは、コマンドのエイリアスを設定するために使用されます。このコマン...
目次01 非表示の列を作成する02 非表示の列に対する基本操作03 非表示の列メタデータ04 主キー...
1. ネットワークマシンでは、デフォルトのcentosyumソースを使用します [root@kole...
最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメ...
メニューバーの例 1: コードをコピーコードは次のとおりです。 <!DOCTYPE html ...