React-Router V6 传参，类式组件用ref搭个桥接收。

背景：写着个小项目呢，编译突然就报错了，React-Router 5突然就不行了，我也不知道我干了啥。换成V6试试吧，编译的错竟然好了。但是一堆React-Router的问题啊。烦烦烦，这种跨版本的依赖最烦人了。没办法，改这个应该比找编译出错的问题简单吧！那就开始吧。

基础的语法有变动就不说了，不是这篇文章的重点，想了解的参考这个大哥的文章
大哥文章链接

我的问题：
React-Router 6 之前的参数传递，很。。。多样化，有Link标签了，this.history.push了等待，具体想知道，参考这个大哥的文章（这个大哥说state页面刷新参数不会丢失，前提是路由用BrowserRouter包起来哦）
大哥文章链接
但是，V6之后，就没法用this.history.push传参了，那也就是说，没法用this.props.获取参数了。
吐了，那怎么办。。。没关系，新版的封装了useParams，useLocation可以获取参数。试试吧

import { useParams } from "react-router-dom";
//import {Link,useLocation} from 'react-router-dom';

emmmmmmm，为啥他是是基于HOOK的。我都是类式组件啊。那怎么办，难道我要去看hook吗，耽误事啊（建议还是学一学Hook，我懒，一直没看，最近在学着）

解决办法：函数式组件，通过ref。上代码

1、先看动态路由传参（就是之前的params）

// 这是路由页面的路由配置
<Route path="/detail/:type/:rid" element={<ComDetail />}></Route>

// 这是列表页面
<Link to={`/detail/image/${item.rid}`} className="imgitem" key={index}></Link>

// 这是接收参数的详情页
// useImperativeHandle
import React, { Component,useImperativeHandle } from 'react'
// 引入useParams
import { useParams } from "react-router-dom";
//定义个函数式组件
function A(props){
  // 获取动态路由的值
  const params = useParams();
   useImperativeHandle(props.onRef, () => {
    return{
      params,
    }
  });
  return (
    <span></span>
  )
}

// 类式组件
export default class Detail extends Component {
	constructor(props){
    super(props);
    this.state={
      // 创建ref
      funRef: React.createRef(),
    }
  }
  render() {
  	let {funRef} = this.state;
  	return (
  		<>
  		<A onRef={this.state.funRef} style={{display:'none'}}></A>
  		</>
  	)
  }
}

okk，这样打印一下state，你就会发现，你穿的param在你的state上来

2、再来看看怎么传state

// 这是传参（state）的页面
import {useNavigate} from 'react-router-dom';
// 定义函数式组件
function CSMT(props){
  let data = props.data;
  let navigate = useNavigate();

  function handleSkipImageList(cityname){
    return ()=>{
      // 这里就把state 传过去了
      navigate("../listimg", { state: {whly_cs:cityname}});
    }
  }

  return (
    <div onClick={handleSkipImageList(参数)}></div>
  )
}

export default class Index extends Component {
	state = {
		data:{你的数据}
	}
	render(){
		return(
			<CSMT data={data}/>
		)
	}
}

// 这里是接收state参数
import {Link,useLocation} from 'react-router-dom';
function A(props){
  // 获取动态路由的值
  const location = useLocation();
   useImperativeHandle(props.onRef, () => {
    return{
      location,
    }
  });
  return (
    <span></span>
  )
}

export default class ListImg extends Component {
	constructor(props){
    super(props);
    this.state={
      // 创建ref
      funRef: React.createRef(),
    }
  }
  render() {
  	let {funRef} = this.state;
  	return (
  		<>
  		<A onRef={this.state.funRef} style={{display:'none'}}></A>
  		</>
  	)
  }
}

okk