react三种路由传值

本文主要是介绍react三种路由传值，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

主要组件

import React from 'react'
import {Link, Route} from 'react-router-dom'

import Detial from './Detial'


class Message extends React.Component{
  state = {
    messageArr:[
      {'id':'01',title:'消息1'},
      {'id':'02',title:'消息2'},
      {'id':'03',title:'消息3'},
    ]
  }
  render(){
    const {messageArr} = this.state
    return (
      <div>
        <h1>asd</h1>
        <ul>
          {
            messageArr.map((msgObj)=>{
              return(
                <li key={msgObj.id}>
                  {/* 向路由组件传递params参数 */}
                  {/* <Link to={'/home/message/detial/'+msgObj.id+'/'+msgObj.title}>{msgObj.title}</Link>; */}

                  {/* 向路由组件传递search参数 */}
                  {/* <Link to={'/home/message/detial/'+'?id='+msgObj.id+'&title='+msgObj.title}>{msgObj.title}</Link>; */}

                  {/* 向路由组件传递state参数 */}
                  <Link to={{pathname:'/home/message/detial',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>;
                </li>
              );
            })
          }
        </ul>
        <hr/>
        {/* 声明接收params参数 */}
        {/* <Route path='/home/message/detial/:id/:title' component={Detial}/> */}

        {/* search无需声明接收 */}
        {/* <Route path='/home/message/detial' component={Detial}/> */}

        {/* state无需声明接收 */}
        <Route path='/home/message/detial' component={Detial}/>
      </div>
    );
  }
}

接收路由消息组件

import React,{Component} from 'react'
import qs from 'querystring'


class Detial extends Component{
  render(){
    // 接收params参数
    // const {id,title} = this.props.match.params

    // 接收search参数
    // const {search} = this.props.location;
    // const {id,title} = qs.parse(search.slice(1));

    // 接收state参数，防止为空（页面刷新）
    const {id,title} = this.props.location.state || {};

    return(
      <ul>
        <li>{id}</li>
        <li>{title}</li>
        <li>asd</li>
      </ul>
    );
  }
}

export default Detial;

三种路由传值方式：params传值，search传值，state传值
使用state传值时要是刷新页面会导致数据消失

• 1.params参数：

  • 路由链接（路径携带参数）：
  • 注册路由（声明接收）
  • 接收参数

• 2.search参数：

  • 路由链接（携带参数，？后携带参数）
  • 注册路由（无需声明，正常注册即可）
  • 接收参数：this.props.location.search
  • 备注：获取到的search是编码字符串，需要借助querystring解析

• 3.state参数

  • 路由链接（携带参数）
  • 注册路由（无需声明，正常注册即可）
  • 接收参数：this.props.location.state
  • 备注：刷新也可以保留住参数

这篇关于react三种路由传值的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！