欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react中Link传递多个参数 一看就懂

程序员文章站 2022-07-14 18:26:06
...

废话不多说没直接上最直接最简单的代码
例如a.js 要传到b.js页面

路由表中直接配置 可以忽略,Link的时候写对就行

import React from 'react';
import {
	HashRouter,
	Route
} from 'react-router-dom';
import Wenda_detail from '../content/wenda_detail/index.js';
const Content = () => (
	<div id="content">	
		<Route path="/wenda_detail" component={Wenda_detail} />
	</div>
);

export default Content;

a.js

	<Link to={{ pathname: '/wenda_detail' , 
							query : {
								 id: item.id,
								 questionTime:item.questionTime,
								 userImgUrl:item.userImgUrl,
								 content:item.content,
								 userName:item.userName,
								 answerSum:item.answerSum
							}}}>
						  <li key={item.id}>	
							 {item.id}
						  </li>
						  </Link>

b.js
直接这样获取

	this.state={
			id:this.props.location.query.id,
			content:this.props.location.query.content,
			userName:this.props.location.query.userName,
			userImgUrl:this.props.location.query.userImgUrl,
			questionTime:this.props.location.query.questionTime,
		}

页面随便找个地方渲染出来

{this.state.id}

如果对你有帮助,别忘了点个赞

相关标签: Link传递多个参数