大家好,又见面了,我是你们的朋友全栈君。
第一种传参方式,动态路由传参
<Link to='/home/dx'>首页</Link>
<Route path="/home/:name" component={
Home}>
‘dx’为被传递的字符串,在home组件中 通过
this.props.match.params
会收到
{
name: 'dx' }
优点:
1、‘传参和接收都比较简单’
2、刷新页面参数不会丢失
缺点:
1、 ‘当复杂数据对象或数组需要传参时,这样做比较麻烦,需要通过json字符串的方式进行处理’
2、多个参数的传递不方便
3、参数会出现在url上,不够安全
动态路由一般都是用来传递某个唯一的值,比如详情或编辑的id
第二种传参方式,search传参
通过设置link的path属性,进行路由的传参,当点击link标签的时候,会在上方的url地址中显示传递的整个url
<Link to='/home?name=dx'>首页</Link>
如果想真正获取到传递过来的参数,需要在对应的子组件中
this.props.location.search
获取字符串,再手动解析
或者
this.props.location.query
优点:
1、‘传参和接收都比较简单’
2、刷新页面参数不会丢失
3、可以传递多个参数
缺点:
1、‘当复杂数据对象或数组需要传参时,这样做比较麻烦,需要通过json字符串的方式进行处理’
2、参数会出现在url上,不够安全
第三种传参方式,隐式路由state传参
<Link to={
{
pathname: 'about',
state: {
name: 'dx'
}
}}>关于</Link>
所谓隐式路由传参,就是传参的信息不回暴露在url中,当点击该link标签,想要获取到传递的参数,就在对应的路由组件中,通过
this.props.location.state
获取即可
优点:
1、‘传参和接收都比较简单’
2、可以传递多个参数
3、传递对象数组等复杂参数方便
4、不会暴露给用户,比较安全
缺点:
1、如果手动刷新当前路由时,数据参数有可能会丢失!!!’
在react中,最外层包裹了BrowserRouter时,不会丢失,但如果使用的时HashRouter,刷新当前页面时,会丢失state中的数据
第四种传参方式 组件间传参
何时使用?
当一个路由组件需要接收来自父组件传参的时候
改造route标签通过component属性激活组件的方式
正常情况下的route标签在路由中的使用方式
//简洁明了,但没办法接收来自父组件的传参
<Route path='/test' component={
Test}></Route>
改造之后
<Link to='/test'>测试</Link>
<Route path='/test' render={
(routeProps) => {
//routeProps就是路由组件传递的参数
return (
//在原先路由组件参数的情况,扩展绑定父组件对子组件传递的参数
<Test {
...routeProps} name='dx' age={
18} />
)
}}></Route>
当点击link标签时,通过在对应的test子组件中,this.props获取来自父组件传递的参数和路由组件自带的参数
强烈推荐,传递参数略微有些麻烦,接收参数十分方便,并且仍然可以接收路由组件自带的参数,安全,不会被用户看见
最后一种传参方式 withRouter 高阶组件给子组件绑定路由参数
withRouter 何时使用?
想要在某个子组件中获取路由的参数,必须得使用路由中的route标签的子组件才能被绑定上路由的参数。
为了解决不通过route标签绑定的子组件获取路由参数的问题,需要使用withRouter
一般用在返回首页,返回上一级等按钮上
import React from 'react';
import BackHome from './backhome';
export default class Test extends React.Component {
render () {
console.log(this.props)
return (
<div>
这是测试的内容
//返回首页的按钮不是通过route标签渲染的,所以该子组件的this.props中没有路由参数
<BackHome>返回首页</BackHome>
</div>
)
}
}
import React from 'react';
//导入withRoute
import {
withRouter} from 'react-router-dom';
class BackHome extends React.Component {
goHome = () => {
//必须在使用withRouter的情况下,该组件在this.props中才有路由参数和方法
//否则,会报错
this.props.history.push({
pathname: '/home',
state: {
name: 'dx' //同样,可以通过state向home路由对应的组件传递参数
}
})
}
render () {
return (
<button onClick={
this.goHome}>this.props.children</button>
)
}
}
//导出的时候,用withRouter标签将backHome组件以参数形式传出
export default withRouter(BackHome)
当你需要使用的时候,就很重要,所以还是比较推荐。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/132263.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...