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

你可能感兴趣的:(React技术栈相关,react.js,javascript)