React路由組件傳參的三種方式(params、search、state)
??向路由組件傳遞params參數(shù)
當點擊消息1這個導航鏈接時，展示下方對應的Detail路由組件，并向這個組件傳遞params參數(shù)（ID，TITLE，CONTENT）信息。
向路由組件傳遞params參數(shù)：在路徑后面跟上想要傳遞的值
{
messageArr.map((msgObj) => {
return (
<li key={msgObj.id}>
<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>
{msgObj.title}</Link>
</li>
)
})
}
注冊路由時，聲明接收params參數(shù)
<Route path="/home/message/detail/:id/:title" component={Detail} />
這樣id，title參數(shù)就傳遞給了Detail組件，Detail組件可以通過this.props.match.params拿到參數(shù)。
// 接收params參數(shù)
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參數(shù) */}
<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>
{msgObj.title}</Link>
</li>
)
})
}
</ul>
<hr />
{/* 注冊路由 */}
{/* 聲明接收params參數(shù) */}
<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參數(shù)
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參數(shù)
當點擊消息1這個導航鏈接時，展示下方對應的Detail路由組件，并向這個組件傳遞search參數(shù)（ID，TITLE，CONTENT）信息。
向路由組件傳遞search參數(shù)：和params的寫法有所不同
{
messageArr.map((msgObj) => {
return (
<li key={msgObj.id}>
{/* 向路由組件傳遞search參數(shù) */}
<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>
{msgObj.title}</Link>
</li>
)
})
}
注冊路由時，search參數(shù)無需聲明接收，正常注冊路由即可，因為傳遞search參數(shù)的路徑里有一個？關鍵符存在
<Route path="/home/message/detail" component={Detail} />
這樣id，title參數(shù)就傳遞給了Detail組件，Detail組件可以通過this.props.location.search拿到參數(shù)。
但是，接收到的參數(shù)是一個 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參數(shù)
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參數(shù) */}
<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>
{msgObj.title}</Link>
</li>
)
})
}
</ul>
<hr />
{/* 注冊路由 */}
{/* search參數(shù)無需聲明接收，正常注冊路由即可 */}
<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參數(shù)
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參數(shù)
前面學的兩個參數(shù)給組件傳遞的信息會在地址欄中展示出來，例如：localhost:3000/home/message/detail/?id=01&title=消息1，這是傳遞search參數(shù)的地址。
但是，傳遞state參數(shù)不會在地址欄中顯示出來。
向路由組件傳遞state參數(shù)：
{
messageArr.map((msgObj) => {
return (
<li key={msgObj.id}>
{/* 向路由組件傳遞state參數(shù) */}
<Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>
{msgObj.title}</Link>
</li>
)
})
}
注：這里的to屬性要寫成一個對象的形式（傳遞params和search參數(shù)都是字符串形式），對象有兩個屬性分別是：pathname以及state，需要傳遞的參數(shù)就放在state中。
注冊路由時，search參數(shù)無需聲明接收，正常注冊路由即可。
<Route path="/home/message/detail" component={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->Detail} />這樣id，title參數(shù)就傳遞給了Detail組件，Detail組件可以通過this.props.location.state拿到參數(shù)。
// 接收state參數(shù)
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參數(shù) */}
<Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>
{msgObj.title}</Link>
</li>
)
})
}
</ul>
<hr />
{/* 注冊路由 */}
{/* state參數(shù)無需聲明接收，正常注冊路由即可 */}
<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參數(shù)
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數(shù)據(jù)，當清除瀏覽器緩存，重新打開頁面，數(shù)據(jù)會丟失。改為如下代碼，頁面刷新不會報錯。
// 接收state參數(shù)
const { id, title } = this.props.location.state || {}
const findResult = DetailData.find((detailObj) => {
// 如果某一項對象的id和我傳過來的Id相等，findResult就等于這一項對象
return detailObj.id === id
}) || {}
??總結三種向路由組件傳參的方式
params參數(shù)：
路由鏈接（攜帶參數(shù)）：<Link to=“/demo/test/tom/18”>詳情
注冊路由（聲明接收）：<Route path=“/demo/test/:name/:age” component={Test}/>
接收參數(shù)：this.props.match.params
search參數(shù)：
路由鏈接（攜帶參數(shù)）：<Link to=“/demo/test?name=tom&age=18”>詳情
注冊路由（無需聲明，正常注冊即可）：<Route path=“/demo/test” component={Test}/>
接收參數(shù)：this.props.location.search
備注：獲取到的search是urlencoded編碼字符串，需要借助querystring解析。
state參數(shù)：
路由鏈接（攜帶參數(shù)）：<Link to={{pathname:‘/demo/test’,state: {name: ‘tom’,age:18}}}>詳情
注冊路由（無需聲明，正常注冊即可）：<Route path=“/demo/test” component={Test}/>
接收參數(shù)：this.props.location.state
備注：如果不用BrowserRouter,刷新保留不住參數(shù)，因為BrowserRouter的history里保留了參數(shù)信息。
到此這篇關于React路由組件傳參的三種方式(params、search、state)的文章就介紹到這了,更多相關React路由組件傳參內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了react中使用antd及immutable示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要給大家介紹了關于react中hook及使用的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要介紹了詳解React服務端渲染從入門到精通，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要為大家介紹了React?模式之純組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
react中的key屬性,它是一個特殊的屬性,它是出現(xiàn)不是給開發(fā)者用的,而是給React自己使用,有了key屬性后,就可以與組件建立了一種對應關系,本文主要介紹了React中Key屬性作用,具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了使用useEffect模擬組件生命周期，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在使用reactjs庫的時候,會遇到將一段html的字符串,然后要將它插入頁面中以html的形式展現(xiàn),本文主要介紹了react解析html字符串方法實現(xiàn),感興趣的可以了解一下2023-12-12
useCallback是react中比較重要的一個hook，useCallback 用來返回一個函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用2023-01-01
React?中hooks之?React.memo?和?useMemo用法示例總結
React.memo是一個高階組件,用于優(yōu)化函數(shù)組件的性能,通過記憶組件渲染結果來避免不必要的重新渲染,合理使用React.memo和useMemo可以顯著提升React應用的性能,本文介紹React?中hooks之?React.memo?和?useMemo用法總結,感興趣的朋友一起看看吧2025-01-01
React-router4路由監(jiān)聽的實現(xiàn)
這篇文章主要介紹了React-router4路由監(jiān)聽的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08