[React路由传值]React传递params、search、state参数

一、传递parmas参数

import HelloDetail from "./HelloDetail";
export default function Hello() {
    const person = {
        id:1,
        name:"张三"
    }
    return (
        <div>
        		//===========================传值=================================
            <Link to={`/hello/helloDetail/${person.id}/${person.name}`}>HelloDetail</Link>

            <hr/>
            <Switch>
            //==============================接收值=================================
                <Route path={"/hello/helloDetail/:id/:name"} component={HelloDetail}/>
            </Switch>
        </div>
    )

}

class HelloDetail extends Component {

    render() {
        return (
            <div>
                <h1>HelloDetail</h1>
            </div>
        );
    }

    componentDidMount() {
        //组件中this.props中接收到参数
        console.log(this.props)
        const {id,name} = this.props.match.params
    }
}

 

二、传递search 参数

export default function Hello() {
    const person = {
        id:1,
        name:"张三"
    }
    return (
        <div>
            <Link to={`/hello/helloDetail/?id=${person.id}&name=${person.name}`}>HelloDetail</Link>

            <hr/>
            <Switch>
                {/*search无需声明接收*/}
                <Route path={"/hello/helloDetail"} component={HelloDetail}/>
            </Switch>
        </div>
    )

}

  

import qs from 'querystring'
class HelloDetail extends Component {

    render() {
        return (
            <div>
                <h1>HelloDetail</h1>
            </div>
        );
    }

    componentDidMount() {
        console.log(this.props)
        const {search} = this.props.location
        const result = qs.parse(search.slice(1))
        console.log(result)
    }
}

三、传递state 参数

import qs from 'querystring'
class HelloDetail extends Component {

    render() {
        return (
            <div>
                <h1>HelloDetail</h1>
            </div>
        );
    }

    componentDidMount() {
        console.log(this.props)
        const {search} = this.props.location
        const result = qs.parse(search.slice(1))
        console.log(result)
    }
}

class HelloDetail extends Component {

    render() {
        return (
            <div>
                <h1>HelloDetail</h1>
            </div>
        );
    }

    componentDidMount() {
        console.log(this.props)
    }
}