react中使用路由传递state参数，但是props为空的解决方法

一、问题介绍

需求：点击路由跳转后，需要给跳转过去的页面传递一些参数

问题：不仅接收不到参数，而且整个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：如果大家知道怎么直接解决类组件与类组件之间传递，可以交流一下