React路由組件傳參的三種方式(params、search、state)
??向路由組件傳遞params參數
當點擊消息1這個導航鏈接時，展示下方對應的Detail路由組件，并向這個組件傳遞params參數（ID，TITLE，CONTENT）信息。
向路由組件傳遞params參數：在路徑后面跟上想要傳遞的值
{
messageArr.map((msgObj) => {
return (
<li key={msgObj.id}>
<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>
{msgObj.title}</Link>
</li>
)
})
}
注冊路由時，聲明接收params參數
<Route path="/home/message/detail/:id/:title" component={Detail} />
這樣id，title參數就傳遞給了Detail組件，Detail組件可以通過this.props.match.params拿到參數。
// 接收params參數
const { id, title } = this.props.match.params
Message->index.jsx：
import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail';
export default class Message extends Component {
state = {
messageArr: [
{ id: '01', title: '消息1' },
{ id: '02', title: '消息2' },
{ id: '03', title: '消息3' }
]
}
render() {
const { messageArr } = this.state
return (
<div>
<ul>
{
messageArr.map((msgObj) => {
return (
<li key={msgObj.id}>
{/* 向路由組件傳遞params參數 */}
<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>
{msgObj.title}</Link>
</li>
)
})
}
</ul>
<hr />
{/* 注冊路由 */}
{/* 聲明接收params參數 */}
<Route path="/home/message/detail/:id/:title" component={Detail} />
</div>
)
}
}
Detail->index.jsx:
import React, { Component } from 'react'
const DetailData = [
{ id: '01', content: '你好，中國' },
{ id: '02', content: '你好，程序員' },
{ id: '03', content: '你好，csdn' }
]
export default class Detail extends Component {
render() {
// 接收params參數
const { id, title } = this.props.match.params
const findResult = DetailData.find((detailObj) => {
// 如果某一項對象的id和我傳過來的Id相等，findResult就等于這一項對象
return detailObj.id === id
})
return (
<ul>
<li>ID: {id}</li>
<li>TITLE: {title}</li>
<li>CONTENT: {findResult.content}</li>
</ul>
)
}
}
??向路由組件傳遞search參數
當點擊消息1這個導航鏈接時，展示下方對應的Detail路由組件，并向這個組件傳遞search參數（ID，TITLE，CONTENT）信息。
向路由組件傳遞search參數：和params的寫法有所不同
{
messageArr.map((msgObj) => {
return (
<li key={msgObj.id}>
{/* 向路由組件傳遞search參數 */}
<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>
{msgObj.title}</Link>
</li>
)
})
}
注冊路由時，search參數無需聲明接收，正常注冊路由即可，因為傳遞search參數的路徑里有一個？關鍵符存在
<Route path="/home/message/detail" component={Detail} />
這樣id，title參數就傳遞給了Detail組件，Detail組件可以通過this.props.location.search拿到參數。
但是，接收到的參數是一個 urlencoded 格式的（例如 name=tom&age=18 就是urlencoded格式）
所以我們需要將 urlencoded格式 轉換為一個 對象 的形式，需要借助一個query-string庫。
// 安裝query-string庫 npm i --save --include=dev query-string // 引入query-string import qs from 'query-string'
query-string庫里有兩個方法stringfy()和parse()。
// 將object轉化為urlencoded qs.stringify() // 將urlencoded轉化為object qs.parse()
// 接收search參數
const { search } = this.props.location
const { id, title } = qs.parse(search.slice(1))
Message->index.jsx：
import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail';
export default class Message extends Component {
state = {
messageArr: [
{ id: '01', title: '消息1' },
{ id: '02', title: '消息2' },
{ id: '03', title: '消息3' }
]
}
render() {
const { messageArr } = this.state
return (
<div>
<ul>
{
messageArr.map((msgObj) => {
return (
<li key={msgObj.id}>
{/* 向路由組件傳遞search參數 */}
<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>
{msgObj.title}</Link>
</li>
)
})
}
</ul>
<hr />
{/* 注冊路由 */}
{/* search參數無需聲明接收，正常注冊路由即可 */}
<Route path="/home/message/detail" component={Detail} />
</div>
)
}
}
Detail->index.jsx:
import React, { Component } from 'react'
// 引入query-string庫
import qs from 'query-string'
const DetailData = [
{ id: '01', content: '你好，中國' },
{ id: '02', content: '你好，程序員' },
{ id: '03', content: '你好，csdn' }
]
export default class Detail extends Component {
render() {
// 接收search參數
const { search } = this.props.location
const { id, title } = qs.parse(search.slice(1))
const findResult = DetailData.find((detailObj) => {
// 如果某一項對象的id和我傳過來的Id相等，findResult就等于這一項對象
return detailObj.id === id
})
return (
<ul>
<li>ID: {id}</li>
<li>TITLE: {title}</li>
<li>CONTENT: {findResult.content}</li>
</ul>
)
}
}
??向路由組件傳遞state參數
前面學的兩個參數給組件傳遞的信息會在地址欄中展示出來，例如：localhost:3000/home/message/detail/?id=01&title=消息1，這是傳遞search參數的地址。
但是，傳遞state參數不會在地址欄中顯示出來。
向路由組件傳遞state參數：
{
messageArr.map((msgObj) => {
return (
<li key={msgObj.id}>
{/* 向路由組件傳遞state參數 */}
<Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>
{msgObj.title}</Link>
</li>
)
})
}
注：這里的to屬性要寫成一個對象的形式（傳遞params和search參數都是字符串形式），對象有兩個屬性分別是：pathname以及state，需要傳遞的參數就放在state中。
注冊路由時，search參數無需聲明接收，正常注冊路由即可。
<Route path="/home/message/detail" component={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->Detail} />這樣id，title參數就傳遞給了Detail組件，Detail組件可以通過this.props.location.state拿到參數。
// 接收state參數
const { id, title } = this.props.location.state
Message->index.jsx：
import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail';
export default class Message extends Component {
state = {
messageArr: [
{ id: '01', title: '消息1' },
{ id: '02', title: '消息2' },
{ id: '03', title: '消息3' }
]
}
render() {
const { messageArr } = this.state
return (
<div>
<ul>
{
messageArr.map((msgObj) => {
return (
<li key={msgObj.id}>
{/* 向路由組件傳遞state參數 */}
<Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>
{msgObj.title}</Link>
</li>
)
})
}
</ul>
<hr />
{/* 注冊路由 */}
{/* state參數無需聲明接收，正常注冊路由即可 */}
<Route path="/home/message/detail" component={Detail} />
</div>
)
}
}
Detail->index.jsx:
import React, { Component } from 'react'
const DetailData = [
{ id: '01', content: '你好，中國' },
{ id: '02', content: '你好，程序員' },
{ id: '03', content: '你好，csdn' }
]
export default class Detail extends Component {
render() {
// 接收state參數
const { id, title } = this.props.location.state
const findResult = DetailData.find((detailObj) => {
// 如果某一項對象的id和我傳過來的Id相等，findResult就等于這一項對象
return detailObj.id === id
})
return (
<ul>
<li>ID: {id}</li>
<li>TITLE: {title}</li>
<li>CONTENT: {findResult.content}</li>
</ul>
)
}
}
有一個問題：當刷新頁面，頁面內容不會改變，原因是history下保存著state數據，當清除瀏覽器緩存，重新打開頁面，數據會丟失。改為如下代碼，頁面刷新不會報錯。
// 接收state參數
const { id, title } = this.props.location.state || {}
const findResult = DetailData.find((detailObj) => {
// 如果某一項對象的id和我傳過來的Id相等，findResult就等于這一項對象
return detailObj.id === id
}) || {}
??總結三種向路由組件傳參的方式
params參數：
路由鏈接（攜帶參數）：<Link to=“/demo/test/tom/18”>詳情
注冊路由（聲明接收）：<Route path=“/demo/test/:name/:age” component={Test}/>
接收參數：this.props.match.params
search參數：
路由鏈接（攜帶參數）：<Link to=“/demo/test?name=tom&age=18”>詳情
注冊路由（無需聲明，正常注冊即可）：<Route path=“/demo/test” component={Test}/>
接收參數：this.props.location.search
備注：獲取到的search是urlencoded編碼字符串，需要借助querystring解析。
state參數：
路由鏈接（攜帶參數）：<Link to={{pathname:‘/demo/test’,state: {name: ‘tom’,age:18}}}>詳情
注冊路由（無需聲明，正常注冊即可）：<Route path=“/demo/test” component={Test}/>
接收參數：this.props.location.state
備注：如果不用BrowserRouter,刷新保留不住參數，因為BrowserRouter的history里保留了參數信息。
到此這篇關于React路由組件傳參的三種方式(params、search、state)的文章就介紹到這了,更多相關React路由組件傳參內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了React 子組件向父組件傳值的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
使用react-router4.0實現重定向和404功能的方法
本篇文章主要介紹了使用react-router4.0實現重定向和404功能的方法，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了react native 獲取地理位置的方法示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
在React中,組件通信是一個重要的概念,它允許不同組件之間進行數據傳遞和交互，本文主要介紹了React組件通信的實現示例，感興趣的可以了解一下2023-11-11
這篇文章主要介紹了React實現類似淘寶tab居中切換效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
React styled-components設置組件屬性的方法
這篇文章主要介紹了styled-components設置組件屬性的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
React報錯Element type is invalid解決案例
這篇文章主要為大家介紹了React報錯Element type is invalid解決案例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
錨點目錄定位功能在長頁面和文檔類網站中非常常見,它可以讓用戶快速定位到頁面中的某個章節(jié),本文講給大家介紹一下React項目中如何實現一個簡單的錨點目錄定位,文中有詳細的實現代碼,需要的朋友可以參考下2023-09-09
react中的watch監(jiān)視屬性-useEffect介紹
這篇文章主要介紹了react中的watch監(jiān)視屬性-useEffect使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
MUI是一款基于React的UI組件庫，可以方便地構建美觀的用戶界面，使用MUI的DataTable組件和分頁器組件可以輕松實現用戶列表分頁功能，這篇文章使用MUI庫實現了用戶列表分頁功能，感興趣的同學可以參考下文2023-05-05