React向路由组件传参的三种方式

发布时间:2022-09-06 03:30

一、params 参数

1.路由链接

<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}Link>

2.路由注册

<Route path="/home/message/detail/:id/:title" component={Detail}/>

3.参数接收

const {id,title} = this.props.match.params

二、search 参数

1.路由链接

<Link to='/demo/test?name=tom&age=18'}>详情Link>

2.路由注册

<Route path="/demo/test" component={Test}/>

3.参数接收

this.props.location.search

4.参数处理

import qs from 'querystring'

const {search} = this.props.location
const {id,title} = qs.parse(search.slice(1))

三、state参数

1.路由链接

详情Link>

2.路由注册

<Route path="/demo/test" component={Test}/>

3.参数接收

this.props.location.state

四、总结

父组件内容

import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
	state = {
		messageArr:[
			{id:'01',title:'消息1'},
			{id:'02',title:'消息2'},
			{id:'03',title:'消息3'},
		]
	}
	render() {
		const {messageArr} = this.state
		return (
			
    { messageArr.map((msgObj)=>{ return (
  • {/* 向路由组件传递params参数 */} {/* {msgObj.title} */} {/* 向路由组件传递search参数 */} {/* {msgObj.title} */} {/* 向路由组件传递state参数 */} {msgObj.title}
  • ) }) }

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号