React 向路由组件传递数据

2021-02-18

如何向路由组件传递数据呢

向React路由组件传递数据有三种方法，分别是params,search,state
本篇文章将会利用如下图所示小案例进行讲述

根据图片可以得知，在Message组件中，点击链接可以得到该链接详情，所以首先在Message组件中新建文件夹Deatail,创建Detail组件

import React, { Component } from 'react';

class Detail extends Component {
    render() {      
        console.log(this.props)
        return (
            <div>
                <ul>
                    <li>ID:</li>
                    <li>title:</li>
                    <li>content:</li>
                </ul>
            </div>
        );
    }
}

export default Detail;

1 params方法

在Message组件中修改代码

render() {
    const {messageinfo} = this.state
    return (
        <div>
            <ul>
                {
                    messageinfo.map((item)=>{
                        return (<li key={item.id}>
                            {/* 向路由组件传递params参数 */}
                            <Link to={`/home/message/detail/${item.id}/${item.title}/${item.content}`}>{item.title}</Link>
                        </li>)
                    })
                }
            </ul>
            <hr/>
            <div>
            {/* 声明接收params参数 */}
                <Route path="/home/message/detail/:id/:title/:content" component={Detail}></Route>
            </div>
        </div>
    );
}

在Detail组件中修改代码

render() {
    console.log(this.props)
    //接收params参数
    const {match} = this.props
    return (
        <div>
            <ul>
                <li>ID:{match.params.id}</li>
                <li>title:{match.params.title}</li>
                <li>content:{match.params.content}</li>
            </ul>
        </div>
    );
}

3 state方法

在Message组件中修改代码

return (
        <div>
            <ul>
                {
                    messageinfo.map((item)=>{
                        return (<li key={item.id}>
                            {/* 向路由组件传递state参数，需要传递对象 */}
                            <Link to={{pathname:'/home/message/detail',state:{id:item.id,title:item.title,content:item.content}}}>{item.title}</Link>
                        </li>)
                    })
                }
            </ul>
            <hr/>
            <div>
            {/* state参数无需声明接收 */}
                <Route path="/home/message/detail" component={Detail}></Route>
            </div>
        </div>
    );
}

在Detail组件中修改代码

render() {
    //接收state参数
    console.log(this.props)
    const {state} = this.props.location
    return (
        <div>
            <ul>
                <li>ID:{state.id}</li>
                <li>title:{state.title}</li>
                <li>content:{state.content}</li>
            </ul>
        </div>
    );
}

4 search方法

在Message组件中修改代码

render() {
    const {messageinfo} = this.state
    return (
        <div>
            <ul>
                {
                    messageinfo.map((item)=>{
                        return (<li key={item.id}>
                            {/* 向路由组件传递search参数 */}
                            <Link to={`/home/message/detail?id=${item.id}&title=${item.title}&content=${item.content}`}>{item.title}</Link>
                        </li>)
                    })
                }
            </ul>
            <hr/>
            <div>
            {/* search参数无需声明接收 */}
                <Route path="/home/message/detail" component={Detail}></Route>
            </div>
        </div>
    );
}

在Detail组件中修改代码

import React, { Component } from 'react';
import qs from 'querystring'   // react有这个插件
class Detail extends Component {
    render() {
        //接收params参数
        console.log(this.props)
        const {search} = this.props.location
        const obj = qs.parse(search)  //将字符串解析对象
        return (
            <div>
                <ul>
                    <li>ID:{obj.id}</li>
                    <li>title:{obj.title}</li>
                    <li>content:{obj.content}</li>
                </ul>
            </div>
        );
    }
}

export default Detail;

本文作者： étoile

本文链接： http://sunnyllxx.github.io/2021/02/18/passing-parameters-to-routing-components/

版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

-------------本文结束感谢您的阅读-------------