react路由跳轉的幾種方式是什麼

方式：1、利用params，參數會顯示在網址列，語法「...({pathname:...,search:網址列資料})」；2、利用state，網址列看不到數據，語法「...({pathname:...,state:{test:...}}」。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react路由跳轉的幾種方式是什麼

注意： 這裡使用的 react-router-dom是版本5以上，路由形式是history模式
#react-router-dom文件位址，其中依賴套件history的github位址

1. params形式，路由跳轉後，參數會顯示在網址列

##跳轉的方法是使用
• history.push({pathname: '/personal', search: 'test=22222'})，其中search#鍵對應的值就是拼接在網址列的資料<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', search: 'test=22222'}) return 123}</pre>
接收的方法。資料都是儲存在
• useLocation中的search取得<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>

#2. 使用state的形式，頁面刷新不會遺失數據，並且網址列也看不到數據

##跳轉的方法是使用

history.push({pathname: '/personal', state: {test: 'dashboard'}})
• ，其中search鍵對應的值就是拼接在位址欄的資料

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

  接收的方法。資料都是儲存在
useLocation
• 中的search取得<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> ##推薦學習：《
react影片教學

》

以上是react路由跳轉的幾種方式是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！