21ルートは道をジャンプ

1、プッシュ

2、交換してください

プッシュ、違いに注意し、最後のルートは、代替の歴史で置き換え、経路履歴を追加

これは、効果を比較するために、プッシュ方式と置き換えるジャンプルートを使用してそれぞれ定義することができ、

例えば、プッシュmessage01をクリックした後、MessageDetailsがクリックmessage02を押して、message01の詳細を表示する場合、MessageDetailsはmessage02後に詳細を示し、

そして、背中をクリックし、message01に返されます

しかし、

プッシュmessage01をクリックした後、MessageDetailsは詳細message01を表示すると、クリックが置き換えmessage02後、MessageDetailsはmessage02後に詳細を示し、

そして、背中をクリックし、message01に戻りませんが、message01は、履歴message01のルーティングを交換しているため、メッセージ（アドレスバー）に戻りました。

前方3、

　　goForward（）メソッドの歴史

4戻ります

　　foBack（）メソッドの歴史

また、我々はジャンプのルーティング要求を送信していないに注意を払う必要があり、非ルーティングされたジャンプは、リクエストを送信します

これらの中でも、使用window.locationの方法を達成するために、ジャンプに非ルーティングページジャンプで

1つのインポートは、{コンポーネント}リアクトから ' 反応' 
2インポート{NavLink、ルート} から ' 反応ルータ-DOM ' 
3  
4  
5インポートMessagesDetails から ' ../messagesdetails/messagesdetails ' 
6  
7エクスポートデフォルトの クラスのメッセージは、コンポーネント{延び
 8      状態= {
 9          messagesArr：[]
 10      }
 11      componentDidMount（）{
 12          LET {messagesArrは} = この.stateと、
13         = messagesArr [
 14              {ID：1、タイトル：' message01 '、コンテンツ：' こんにちは、message01 ' }、
 15              {ID：2、タイトル：' message02 '、コンテンツ：' こんにちは、message02 ' }、
 16              {ID ：3、タイトル：' message03 '、コンテンツ：' こんにちは、message03 ' }]
 17。         この.setState（messagesArr {}）
 18である     }
 19。     
20      // プッシュ
21      showDetails1 =（ID）=> {
 22          この .props.history.push（ `/ホーム/メッセージ/ messagesdetails / $ {ID}`）。
23      }
 24  
25      // 置き換える
26      showDetails2 =（ID）=> {
 27          この .props.history.replace（ `/ホーム/メッセージ/ messagesdetails / $ {ID}を`）。
28      }
 29  
30      // 前进
31      フォワード=（）=> {
 32          この.props.history.goForward（）。
33      }
 34  
35      // 后退
36      バック=（）=> {
 37          この.props.history.goBack（）。
38      }
 39  
40      // 页面跳转
41      goBaidu =（）=> {
 42          window.locationの= " http://www.baidu.com " 。
43      }
 44  
45      （）{レンダリング
 46          のconst {messagesArrは} = この.stateと、
47          リターン（
 48              <DIV>
 49                  <UL>
 50                      {
 51                         messagesArr.map（（メッセージ、指数）=> 
 52                          <LIキー= {索引}>
 53                              <NavLink = { '/ホーム/メッセージ/ messagesdetails / $ {message.id} `}> {message.title} </へNavLink>
 54                              ＆NBSP;＆NBSP; <ボタンのonClick = {（）=> { この .showDetails1（message.id）}}>プッシュ</ボタン>
 55                              ＆NBSP;＆NBSP; <ボタンのonClick = {（）=> { この。 showDetails2（message.id）}}> </ボタン置き換える>
 56                          </ LI>
57                          ）
 58                      }
 59                  </ UL>
 60                  ＆NBSP;＆NBSP; <ボタンのonClick = { 本の.forward}>前进</ボタン>
 61                   ＆NBSP;＆NBSP; <ボタンのonClick = { この .back}>后退</ボタン>
 62                   ＆NBSP;＆NBSP; <ボタンのonClick = { この .goBaidu}>页面跳转</ボタン>
 63                  <ルートパス= " /ホーム/メッセージ/ messagesdetails /：ID "コンポーネント= {messagesDetails} />
 64              </ div>
 65          ）
 66      }
 67 }

ノートへの必要性があることもあります。

showDetails1とshowDetails2これらの2つの方法は、我々はパラメータを受信する必要がある、と我々が使用してthis.showDetailsを使用して、ボタンで、パラメータを渡すことができません

<ボタンのonClick = {（）=> {this.showDetails（message.id）}}> </ボタン>方法伝送パラメータ、コールバック関数パラメータを通過させるための方法です。

おすすめ