React-router路由跳转及传参

标签跳转及传参

代码语言：javascript复制

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

动态路由传参

代码语言：javascript复制

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

代码语言：javascript复制

path: "/detail/:id"

代码语言：javascript复制

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

get传参

代码语言：javascript复制

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

代码语言：javascript复制

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

Js跳转及传参

代码语言：javascript复制

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()

代码语言：javascript复制

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

注意事项

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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
    }
}

router

0 人点赞