背景:写着个小项目呢,编译突然就报错了,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