ノート10反応 - 経路の前端反応

ルート:WebサイトのURLへのアクセスに応じて、コードが異なるコンテンツを示すことができます。

、URLのURLの訪問によって異なるコンポーネントを示すであろうリアクト:フロントエンドルーティングが反応します。

反応にはデフォルトルートではありません、あなたはそれを自分でインストールする必要があります。

インストールルーティングモジュール:NPM --saveインストールルータ-DOM-REACT

BrowserRouter、ルートリンクおよびコンポーネントを導入する:'REACT-ルータ-DOM'からインポート{BrowserRouter、ルート、リンク}。

BrowserRouterが:ルートを定義し、ルートのルートは、ラベルラップにラベルをルーティングする複数の、複数存在する場合にのみ、ルーティングラベル(一般的な使用DIV)を含む、ストリップを含みます

ルート:ルートエントリ。パスプロパティ(パス)は、コンポーネント・プロパティ(コンポーネントが表示されるように、アセンブリ内に導入されたインポートの使用を必要とします)

リンク:(ボタンボタンボタンのページをクリックするとして、リストのパスへのジャンプ)ジャンプをルーティングします。リンクタグモジュールを導入する必要があり、あなたはプロパティを介してパスにジャンプするように指定ジャンプコンポーネントパッケージリンク・ラベルを生成することになるでしょう。

例:パス表示ボタンボタンアセンブリに、経路表示リストリストコンポーネントを入力します。

思考:あなたはページジャンプがいくつかのパラメータを渡したい場合は、それを行うにはどのようにすべきですか?

1⃣️パス内のパラメータを持つ:/一覧A = 123?

パラメータリストのページを取得するには?

レンダリング機能ではthis.props.loaction.searchパラメータを見ることができます:?A = 123

しかし、この方法は、手動で特定のパラメータ値を抽出するために必要です。

パス内の2⃣️パラメータ:/一覧/ 123

これは、パラメータ値への接触は、パス内のルートエントリの属性を設定する必要はありません:パスが変更/一覧/:ID

あなたは機能をレンダリングすることができますthis.props.match.params.idパラメータ値を取得します。

コード:

index.js

インポートは、「反応」から、{コンポーネント}を反応させ; 
; '-DOMを反応させる'からインポートReactDom 
'反応ルータ-DOM'からインポート{BrowserRouter、ルート}。
「./newList」からインポートNewList。
「./newButton」からインポートNewButton。
インポート'antd / DIST / antd.css'; 

クラスエントリコンポーネント{延び

	(){レンダリング
		リターン(
			<BrowserRouter> 
				の<div> 
					<成分= {NewList} /ルートパス= 'ID /リスト/'> 
					<ルートパス= '/ボタン'コンポーネント= {NewButton} /> 
				</ div> 
			</ BrowserRouter> 
	} 

} 

ReactDom.render(の<entry />、のdocument.getElementById( 'ルート'));

newButton.js

インポートは、「反応」から、{コンポーネント}を反応させ; 
「antd」からインポート{ボタン}。
「反応ルータ-DOM」からインポート{リンク}。


クラスNewButtonは、コンポーネント{延び

	レンダリング(){ 
		リターン(
			<リンクへ= '/リスト/ 123'> 
				<ボタン型= 'プライマリ'>按钮</ボタン> 
			する</ link> 
	} 

} 

エクスポートデフォルトNewButtonと、

newList.js

インポートは、「反応」から、{コンポーネント}を反応させ; 
「antd」からインポート{リスト}。

const型データ= [ 
  「群衆の中に燃料を燃焼車のスプレーレーシング。」、
  「日本の王女の結婚平民に。」、
  「オーストラリアの奥地クラッシュ後に100キロを歩く。」、
  「男は結婚式の女の子が行方不明オーバーチャージ。」、
  「ロサンゼルスの戦い巨大な山火事。 '、
]; 

クラスNewListコンポーネントが{延び

	レンダリング(){ 

		にconsole.log(this.props.match.params.id)。

		リターン(
			<リスト
				スタイル= {{ 
					marginLeft:20、
					marginTop:20、
					marginRight:20 
				}} 
	      ヘッダ= {<DIV>ヘッダ</ div>
	      ボーダー
	      のdataSource = {データ} 
	      のRenderItem = {アイテム=>(<List.Item> {アイテム} </ List.Item>)} 
	    /> 
	} 

} 

エクスポートデフォルトNewList。

  

おすすめ

転載: www.cnblogs.com/superjishere/p/12118584.html