方式：1、利用params，參數會顯示在網址列，語法「...({pathname:...,search:網址列資料})」；2、利用state，網址列看不到數據，語法「...({pathname:...,state:{test:...}}」。
本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。
注意： 這裡使用的 react-router-dom是版本5以上，路由形式是history模式#react-router-dom文件位址，其中依賴套件history的github位址
params形式，路由跳轉後，參數會顯示在網址列
，其中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 ()=> {
const history = useHistory()
// 页面跳转方法
history.push({pathname: '/personal', search: 'test=22222'})
return 123}</pre><div class="contentsignin">登入後複製</div></div>
中的search取得<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 ()=> {
const location = useLocation()
// 页面跳转方法
console.log(location, 'props')
return 123}</pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div> 
的形式，頁面刷新不會遺失數據，並且網址列也看不到數據
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}search取得<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 ()=> {
const location = useLocation()
// 页面跳转方法
console.log(location, 'props')
return 123}</pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div> 
##推薦學習：《以上是react路由跳轉的幾種方式是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
