[JavaScript知识库]react路由传参详解

1.query传参

// 传参:
import React, { Component } from 'react'

export default class QueryOne extends Component {
    goTwo = () => {
        // 跳转传参
        this.props.history.push({
            pathname: '/paramTwo',
            query: {
                id: 1,
                name: 'Suk'
            }
        });
    }
    render() {
        return (
            <div>
                <button onClick={this.goTwo}>query传参</button>
            </div>
        )
    }
}

接收:
import React, { Component } from 'react'

export default class ParamTwo extends Component {
    state = {
        id: '',
        name: ''
    }
    componentDidMount() {
        // 接收query参数
        const { id, name } = this.props.location.query;
        console.log(this.props.location)
        this.setState(() => ({ id, name }))
    }

    render() {
        return (
            <div>
                <h1>id:{this.state.id}</h1>
                <h1>name:{this.state.name}</h1>
                <button onClick={this.goThree}>param传参</button>
            </div>
        )
    }
}

缺点: 页面刷新会丢失,参数存在于内存中,类似于vue的params传参刷新会丢失

2.路径参数

传:
import React, { Component } from 'react'

export default class QueryOne extends Component {
    goTwo = () => {
        // 跳转
        this.props.history.push('/paramTwo?id=1&name=Suk')
    }
    render() {
        return (
            <div>
                <button onClick={this.goTwo}>query传参</button>
            </div>
        )
    }
}

接收:
import React, { Component } from 'react'

export default class ParamTwo extends Component {
    state = {
        id: '',
        name: ''
    }
    componentDidMount() {
        // 接收路径参数的search=?id=?&name=?传入URLSearchParams对象,返回一个map,存的就是值
        const queryMap = new URLSearchParams(this.props.location.search);
        this.setState(() => ({
            id: URLSearchParams.prototype.get.call(queryMap, 'id'),
            name: URLSearchParams.prototype.get.call(queryMap, 'name')
        }))
    }

    render() {
        return (
            <div>
                <h1>id:{this.state.id}</h1>
                <h1>name:{this.state.name}</h1>
                <button onClick={this.goThree}>param传参</button>
            </div>
        )
    }
}

缺点: 需要手动解析search提取参数

优点:页面刷新不会丢失

3.params传参

params传参也就是vue里面的动态路由匹配:
<Route path="/stateThree/:id/:name" component={StateThree} />
这个path的写法和vue的动态路由匹配一样
传:
import React, { Component } from 'react'

export default class ParamTwo extends Component {
    state = {
        id: '',
        name: ''
    }
    goThree = () => {
        // 将id和name按照Route的path中定义的顺序传入
        this.props.history.push({
            pathname: '/stateThree/1/Lay',
        })
    }
    render() {
        return (
            <div>
                <h1>id:{this.state.id}</h1>
                <h1>name:{this.state.name}</h1>
                <button onClick={this.goThree}>param传参</button>
            </div>
        )
    }
}
接收:
import React, { Component } from 'react'

export default class StateThree extends Component {
    state = {
        id: '',
        name: ''
    }
    componentDidMount() {
        // params参数在match对象中存储
        const { id, name } = this.props.match.params;
        this.setState(() => ({
            id, name
        }))
    }
    render() {
        return (
            <div>
                <h1>id:{this.state.id}</h1>
                <h1>name:{this.state.name}</h1>
                <button onClick={this.goFive}>state传值</button>
            </div>
        )
    }
}

优点:遵循restful api风格,页面刷新不会丢失

4.state传参

传:
import React, { Component } from 'react'

export default class StateThree extends Component {
    state = {
        id: '',
        name: ''
    }
    goFive = () => {
        // 传值放到state中
        this.props.history.push({
            pathname: '/dateTime',
            state: {
                id: 3,
                name: 'Susuk'
            }
        })
    }
    render() {
        return (
            <div>
                <h1>id:{this.state.id}</h1>
                <h1>name:{this.state.name}</h1>
                <button onClick={this.goFive}>state传值</button>
            </div>
        )
    }
}
接收:
const { id, name } = this.props.location.state
this.setState(() => ({
    id, name
}))

优点:页面刷新不会丢失

总结一个点:只有query传参页面刷新会造成丢失的情况,注意这点就好