反応ルートにジャンプするいくつかの方法は何ですか?

方法: 1. params を使用します。パラメータはアドレス バーに表示されます。構文は "...({pathname:...,search:address bar data})" です。 2.状態、アドレス バーに表示 データなし、構文 "...({pathname:...,state:{test:...}}"。

このチュートリアルの動作環境: Windows 10 システム、react バージョン 17.0.1、Dell G3 コンピューター

react routing Jump のいくつかの方法について

Note : ここで使用されている 反応ルーター ダム はバージョン 5 以降であり、ルーティング形式は historymode
react-router-dom ドキュメント アドレスです。これはパッケージhistoryのgithubアドレス

1に依存します。ルートジャンプ後のパラメータはparamsの形式で表示されます。アドレスバー

• ジャンプする方法は、history.push({pathname: '/personal', search: 'test =22222'}), search キーが対応する値は、アドレスバーに結合されたデータ

  import React from 'react'import { useHistory } from 'react-router-dom'export default ()=> {
  	const history = useHistory()
  	// 页面跳转方法
  	history.push({pathname: '/personal', search: 'test=22222'})
  	return 123}

• の受信方法です。データは # に格納されます##useLocationsearchGet <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import React from 'react'import { useLocation } from 'react-router-dom'export default ()=&gt; { const location = useLocation() // 页面跳转方法 console.log(location, 'props') return 123}</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

2. state の形式を使用すると、データは失われませんページが更新されると、データはアドレス バーに表示されなくなります。

Jump この方法では、
• history.push({pathname: '/personal' 、state: {test: 'dashboard'}})、search キーに対応する値がアドレスに結合されます。列データを受け取るメソッド <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import React from 'react'import { useHistory } from 'react-router-dom'export default ()=&gt; { const history = useHistory() // 页面跳转方法 history.push({pathname: '/personal', state: { test: 'dashboard' }}) return 123}</pre><div class="contentsignin">ログイン後にコピー</div></div>
データは
• useLocation search Get <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import React from 'react'import { useLocation } from 'react-router-dom'export default ()=&gt; { const location = useLocation() // 页面跳转方法 console.log(location, 'props') return 123}</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

推奨調査: "

react video チュートリアル "

以上が反応ルートにジャンプするいくつかの方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。