一、问题介绍
需求:点击路由跳转后,需要给跳转过去的页面传递一些参数
问题:不仅接收不到参数,而且整个props都为空
初始代码:我一开始是写的两个类式组件
二、问题解决
2.1:上网查询后,试了好多方法都不行,而且很多方法都是针对函数组件的。
然后我就把跳转之后的组件改成了函数式组件。
2.2:解决方法(useLocation):
//函数式组件的代码
import React from 'react'
import {
useLocation} from 'react-router-dom'
function TaskDetails (){
const location = useLocation();
console.log(location);
const myParam = location.state?.myParam ?? '';
console.log(myParam);
return (
<div>Task details</div>
)
}
export default TaskDetails
注册Link的代码
<Link to='/taskDetails' state={
tasksObj} > //tasksObj是一个对象
注册Route的代码
render() {
const {
userId} = this.props
const AlinputRmin = ()=><div><TaskDetails/></div>
return (
<Fragment>
<Route path='/taskDetails/*' element={
AlinputRmin()}/>
<Route path="*" element={
<Navigate to="/mainPages" />} />
</Routes>
</Fragment>
}
三、注意
3.1:useParams也可以解决,由于我传递的是一个对象,使用我选择使用useLocation
3.2:如果大家知道怎么直接解决类组件与类组件之间传递,可以交流一下