0
点赞
收藏
分享

微信扫一扫

React-router路由跳转及传参


标签跳转及传参

import { Link } from "react-router-dom";

动态路由传参

<Link to={`/detail/123`}>跳转到详情</Link>

path: "/detail/:id"

console.log(this.props.match.params.id)

get传参

<Link to={`/detail_t?id=123`}>跳转到详情</Link>

console.log(this.props.location.search)

Js跳转及传参

this.props.history.push({
pathname: "/detail_t", search: `?name=张三&id=123`
})

// 不留栈跳转
this.props.history.replace({
pathname: "/detail_t", search: `?name=张三&id=123`
})

//返回上一级
this.props.history.goBack()

console.log(this.props.location.search)

注意事项

除了​​动态路由传参​​,其它都对参数进行处理

React-router路由跳转及传参_ico

// decodeURIComponent 防止页面刷新参数对中文进行转义
let param = decodeURIComponent(this.props.location.search)

React-router路由跳转及传参_转义_02


这种格式是无法直接获取到指定参数的,这里需要进行转换

export default function parseUrl(param) {
if (param.indexOf("?") == 0) {
let temp = {}
let arr = param.substr(1).split("&")
for (let i in arr) {
let cut = arr[i].split("=")
temp[cut[0]] = cut[1]
}
return temp
} else {
return param
}
}

React-router路由跳转及传参_ico_03


举报

相关推荐

0 条评论