在 React 中,如何在导航组件间传参:理解 params、search 和 state 的用法
最编程
2024-08-01 18:48:46
...
本文仅描述点击 Message 组件传递不同参数给下面组件的过程,需要demo完整代码可以留言。其他的基本知识不做过多赘述。
文章目录
- 1、向路由组件传递 params 参数
- 2、向路由组件传递 search 参数
- 3、向路由组件传递 state 参数
- 4、总结
1、向路由组件传递 params 参数
1)导航区在 Message 组件中,在 Message 组件中定义了一个对象用来存储数据
state = {
messageArr:[
{id:'01',title:'Message001'},
{id:'03',title:'Message003'},
{id:'06',title:'Message006'}
]
}
用 map 遍历来动态生成导航区(此处用到了嵌套路由),/home/message/detail/${msgObj.id}/${msgObj.title}
传递 id
和 title
<ul>
{
messageArr.map((msgObj) => {
return (
<li key={msgObj.id}>
<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
</li>
)
})
}
</ul>
2)Detail 组件声明接收参数 /home/message/detail/:id/:title
<Route path="/home/message/detail/:id/:title" component={Detail}/>
此时 Message 组件已经将参数传递给了 Detail 组件
3)Detail 组件显示参数
const {id,title} = this.props.match.params
...
<ul>
<li>ID:{id}</li>
<li>TITLE:{title}</li>
<li>CONTENT:{findResult.content}</li>
</ul>
4)完整代码
Message 组件:
import React, {Component} from 'react'
import {Route,Link} from 'react-router-dom'
import Detail from "./Detail"
export default class Message extends Component {
state = {
messageArr:[
{id:'01',title:'Message001'},
{id:'03',title:'Message003'},
{id:'06',title:'Message006'}
]
}
render() {
const {messageArr} = this.state
return (
<div>
<ul>
{
messageArr.map((msgObj) => {
return (
<li key={msgObj.id}>
<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
</li>
)
})
}
</ul>
<hr/>
<Route path="/home/message/detail/:id/:title" component={Detail}/>
</div>
)
}
}
Detail 组件:
import React, {Component} from 'react'
const DetailData = [
{id:'01',content:'我爱你,中国'},
{id:'03',content:'我爱你,中国33'},
{id:'06',content:'我爱你,中国6666'}
]
export default class Detail extends Component {
render() {
console.log(this.props)
const {id,title} = this.props.match.params
const findResult = DetailData.find((detailObj) => {
return detailObj.id === id
})
return (
<ul>
<li>ID:{id}</li>
<li>TITLE:{title}</li>
<li>CONTENT:{findResult.content}</li>
</ul>
)
}
}
2、向路由组件传递 search 参数
1)Message 组件传递参数
<ul>
{
messageArr.map((msgObj) => {
return (
<li key={msgObj.id}>
<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
</li>
)
})
}
</ul>
2)Detail 组件无需声明,正常注册即可
<Route path="/home/message/detail" component={Detail}/>
此时 Message 组件已经将参数传递给了 Detail 组件
3)Detail 组件显示参数,获取到的 search 是 urlencoded 编码字符串,需要借助 querystring 解析
const {search} = this.props.location
const {id,title} = qs.parse(search.slice(1))
...
<ul>
<li>ID:{id}</li>
<li>TITLE:{title}</li>
<li>CONTENT:{findResult.content}</li>
</ul>
4)完整代码
Message 组件:
import React, {Component} from 'react'
import {Route,Link} from 'react-router-dom'
import Detail from "./Detail"
export default class Message extends Component {
state = {
messageArr:[
{id:'01',title:'Message001'},
{id:'03',title:'Message003'},
{id:'06',title:'Message006'}
]
}
render() {
const {messageArr} = this.state
return (
<div>
<ul>
{
messageArr.map((msgObj) => {
return (
<li key={msgObj.id}>
<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
</li>
)
})
}
</ul>
<hr/>
<Route path="/home/message/detail" component={Detail}/>
</div>
)
}
}
Detail 组件:
import React, {Component} from 'react'
import qs from 'querystring'
const DetailData = [
{id:'01',content:'我爱你,中国'},
{id:'03',content:'我爱你,中国33'},
{id:'06',content:'我爱你,中国6666'}
]
export default class Detail extends Component {
render() {
console.log(this.props)
const {search} = this.props.location
const {id,title} = qs.parse(search.slice(1))
const findResult = DetailData.find((detailObj) => {
return detailObj.id === id
})
return (
<ul>
<li>ID:{id}</li>
<li>TITLE:{title}</li>
<li>CONTENT:{findResult.content}</li>
</ul>
)
}
}
3、向路由组件传递 state 参数
1)Message 组件传递参数,to 要写成一个对象
<ul>
{
messageArr.map((msgObj) => {
return (
<li key={msgObj.id}>
<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
</li>
)
})
}
</ul>
2)Detail 组件无需声明,正常注册即可
<Route path="/home/message/detail" component={Detail}/>
此时 Message 组件已经将参数传递给了 Detail 组件
3)Detail 组件显示参数
const {id,title} = this.props.location.state
...
<ul>
<li>ID:{id}</li>
<li>TITLE:{title}</li>
<li>CONTENT:{findResult.content}</li>
</ul>
4)完整代码
Message 组件:
import React, {Component} from 'react'
import {Route,Link} from 'react-router-dom'
import Detail from "./Detail"
export default class Message extends Component {
state = {
messageArr:[
{id:'01',title:'Message001'},
{id:'03',title:'Message003'},
{id:'06',title:'Message006'}
]
}
render() {
const {messageArr} = this.state
return (
<div>
<ul>
{
messageArr.map((msgObj) => {
return (
<li key={msgObj.id}>
<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
</li>
)
})
}
</ul>
<hr/>
<Route path="/home/message/detail" component={Detail}/>
</div>
)
}
}
Detail 组件:
import React, {Component} from 'react'
const DetailData = [
{id:'01',content:'我爱你,中国'},
{id:'03',content:'我爱你,中国33'},
{id:'06',content:'我爱你,中国6666'}
]
export default class Detail extends Component {
render() {
console.log(this.props)
const {id,title} = this.props.location.state
const findResult = DetailData.find((detailObj) => {
return detailObj.id === id
})
return (
<ul>
<li>ID:{id}</li>
<li>TITLE:{title}</li>
<li>CONTENT:{findResult.content}</li>
</ul>
)
}
}
4、总结
- 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
备注:虽然地址栏没有显示参数,但是刷新也可以保留住参数