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

Posted Icy Hunter

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React之向路由组件传递参数的三种方式相关的知识，希望对你有一定的参考价值。

文章目录

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

使用实例来感受，本实例继承上一个案例
React之路由的基本操作
此案例src的目录，在上个案例的基础上增加了Detail组件，能够接收到参数

params参数

路由链接(携带参数)：<Link to='/demo/test/tom/18'>详情</Link>
注册路由(声明接收)：<Route path="/demo/test/:name/:age" component=Test/>
接收参数：this.props.match.params

Home/Message/index.jsx:

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 (
			<div>
				<ul>
					
						messageArr.map((msgObj)=>
							return (
								<li key=msgObj.id>

									/* 向路由组件传递params参数 */
									<Link to=`/home/message/detail/$msgObj.id/$msgObj.title`>msgObj.title</Link>

									/* 向路由组件传递search参数 */
									/* <Link to=`/home/message/detail/?id=$msgObj.id&title=$msgObj.title`>msgObj.title</Link> */

									/* 向路由组件传递state参数 */
									/* <Link to=pathname:'/home/message/detail',state:id:msgObj.id,title:msgObj.title>msgObj.title</Link> */

								</li>
							)
						)
					
				</ul>
				<hr/>
				/* 声明接收params参数 */
				<Route path="/home/message/detail/:id/:title" component=Detail/>

				/* search参数无需声明接收，正常注册路由即可 */
				/* <Route path="/home/message/detail" component=Detail/> */

				/* state参数无需声明接收，正常注册路由即可 */
				/* <Route path="/home/message/detail" component=Detail/> */

			</div>
		)

Home/Message/Detail/index.jsx:

import React,  Component  from 'react'

const DetailData = [
	id:'01',content:'你好，中国',
	id:'02',content:'你好，尚硅谷',
	id:'03',content:'你好，未来的自己'
]
export default class Detail extends Component 
	render() 
		console.log(this.props);

		// 接收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 || 

		const findResult = DetailData.find((detailObj)=>
			return detailObj.id === id
		) || 
		return (
			<ul>
				<li>ID:id</li>
				<li>TITLE:title</li>
				<li>CONTENT:findResult.content</li>
			</ul>
		)

运行结果：

能够获取对应参数。

search参数

路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component=Test/>
接收参数：this.props.location.search
备注：获取到的search是urlencoded编码字符串，需要借助qs解析

Home/Message/index.jsx:

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 (
			<div>
				<ul>
					
						messageArr.map((msgObj)=>
							return (
								<li key=msgObj.id>

									/* 向路由组件传递params参数 */
									/* <Link to=`/home/message/detail/$msgObj.id/$msgObj.title`>msgObj.title</Link> */

									/* 向路由组件传递search参数 */
									<Link to=`/home/message/detail/?id=$msgObj.id&title=$msgObj.title`>msgObj.title</Link>

									/* 向路由组件传递state参数 */
									/* <Link to=pathname:'/home/message/detail',state:id:msgObj.id,title:msgObj.title>msgObj.title</Link> */

								</li>
							)
						)
					
				</ul>
				<hr/>
				/* 声明接收params参数 */
				/* <Route path="/home/message/detail/:id/:title" component=Detail/> */

				/* search参数无需声明接收，正常注册路由即可 */
				<Route path="/home/message/detail" component=Detail/>

				/* state参数无需声明接收，正常注册路由即可 */
				/* <Route path="/home/message/detail" component=Detail/> */

			</div>
		)

Home/Message/Detail/index.jsx:

import React,  Component  from 'react'
import qs from 'qs'

const DetailData = [
	id:'01',content:'你好，中国',
	id:'02',content:'你好，尚硅谷',
	id:'03',content:'你好，未来的自己'
]
export default class Detail extends Component 
	render() 
		console.log(this.props);

		// 接收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 || 

		const findResult = DetailData.find((detailObj)=>
			return detailObj.id === id
		) || 
		return (
			<ul>
				<li>ID:id</li>
				<li>TITLE:title</li>
				<li>CONTENT:findResult.content</li>
			</ul>
		)

运行结果：

state参数

路由链接(携带参数)：<Link to=pathname:'/demo/test',state:name:'tom',age:18>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component=Test/>
接收参数：this.props.location.state
备注：刷新也可以保留住参数

Home/Message/index.jsx:

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 (
			<div>
				<ul>
					
						messageArr.map((msgObj)=>
							return (
								<li key=msgObj.id>

									/* 向路由组件传递params参数 */
									/* <Link to=`/home/message/detail/$msgObj.id/$msgObj.title`>msgObj.title</Link> */

									/* 向路由组件传递search参数 */
									/* <Link to=`/home/message/detail/?id=$msgObj.id&title=$msgObj.title`>msgObj.title</Link> */

									/* 向路由组件传递state参数 */
									<Link to=pathname:'/home/message/detail',state:id:msgObj.id,title:msgObj.title>msgObj.title</Link>

								</li>
							)
						)
					
				</ul>
				<hr/>
				/* 声明接收params参数 */
				/* <Route path="/home/message/detail/:id/:title" component=Detail/> */

				/* search参数无需声明接收，正常注册路由即可 */
				/* <Route path="/home/message/detail" component=Detail/> */

				/* state参数无需声明接收，正常注册路由即可 */
				<Route path="/home/message/detail" component=Detail/>

			</div>
		)

Home/Message/Detail/index.jsx:

import React,  Component  from 'react'
// import qs from 'qs'

const DetailData = [
	id:'01',content:'你好，中国',
	id:'02',content:'你好，尚硅谷',
	id:'03',content:'你好，未来的自己'
]
export default class Detail extends Component 
	render() 
		console.log(this.props);

		// 接收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 || 

		const findResult = DetailData.find((detailObj)=>
			return detailObj.id === id
		) || 
		return (
			<ul>
				<li>ID:id</li>
				<li>TITLE:title</li>
				<li>CONTENT:findResult.content</li>
			</ul>
		)

运行结果：

数据传输成功

以上是关于React之向路由组件传递参数的三种方式的主要内容，如果未能解决你的问题，请参考以下文章

vue传参的三种方式

React 向路由组件传递参数

vue中路由传参的三种基本方式

react 组件通讯的三种方式

vue路由传参的三种基本方式

路由传参的三种方法