react-router-dom V6中使用useNavigate_Clearlove_2019

网络投稿 02-07 4594

react-router-dom V6中使用useNavigate

最近在网上学习React编程式路由时跟着视频上的步骤写了之后发现V6版本有些变化，踩了不少的坑，在这里总结以下 1.编程实现路由导航在以前的版本中可以直接使用this.props.history.push()和this.props.history.replace()来传递参数。但在V6中开始使用useNavigate()了，如果要自己写功能实现页面跳转就不能使用Link标签了。但要注意：类式组件不能使用hooks函数，如果你的组件需要使用，得改成函数式组件

这是完成相关功能的组件(Message)

import React, {Component} from 'react'; import {Link,Route,Routes,useNavigate} from 'react-router-dom' import Detail from "./Detail"; function Message(props) { const state = { messageArr:[ {id:'01',title:'消息1'}, {id:'02',title:'消息2'}, {id:'03',title:'消息3'}, ] } const navigate = useNavigate() //编写一段代码，让其实现跳转到detail组件，且为replace跳转 const replaceShow = (id,title)=>{ // param传递 navigate(`/home/message/detail/${id}/${title}`,{replace: true}) } //编写一段代码，让其实现跳转到detail组件，且为push跳转 const pushShow = (id,title) => { navigate(`/home/message/detail/${id}/${title}`) } //回退 const back = ()=>{ navigate(-1) } //向前 const forward =()=>{ navigate(1) } //跳转,设置的值为2 const go = ()=>{ navigate(2) } const {messageArr} = state return ( <div> <ul> { messageArr.map((msgObj)=>{ return ( <li key={msgObj.id}> {/*向路由组件传递params参数*/} <Link to={`detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>   <button onClick={()=>{pushShow(msgObj.id,msgObj.title)}}>push查看</button> <button onClick={()=>{replaceShow(msgObj.id,msgObj.title)}}>replace查看</button> </li> ) }) } </ul> <hr/> <Routes> <Route path="detail/:id/:title" element={<Detail/>}/> </Routes> <button onClick={back}>回退</button> <button onClick={forward}>前进</button> <button onClick={go}>go</button> </div> ); } export default Message;

Detail组件

import React from 'react'; import {useLocation, useParams, useSearchParams} from "react-router-dom"; const DetailData = [ {id:'01',content:'你好，中国'}, {id:'02',content:'你好，川师'}, {id:'03',content:'你好，未来的自己'}, ] function Detail(props) { // 接收param参数 const params = useParams() const id = params.id const title = params.title const findResult = DetailData.find((content)=>{ return content.id === id }) || {} return ( <ul> <li>id:{id}</li> <li>title:{title}</li> <li>content:{findResult.content}</li> </ul> ); } export default Detail;

2.withRouter已经过时 withRouter可以加工一般组件(即非路由组件)，让一般组件具备路由组件所持有的API。但v6版本中已废除，可以直接用useNavigate实现。以下是一个一般组件(Header)，同样可以实现路由组件(Message)中的功能

import React from 'react'; import {useNavigate} from 'react-router-dom' function Header(props) { const navigate = new useNavigate() const back = ()=>{ navigate(-1) } const forward = ()=>{ navigate(1) } const go = ()=>{ navigate(2) } return ( <div className="page-header"> <h2>React Router Demo</h2> <button onClick={back}>回退</button> <button onClick={forward}>前进</button> <button onClick={go}>go</button> </div> ); } export default Header;

3.刷新页面后对路由state参数的影响在以前版本中，BrowserRouter没有任何影响，因为state保存在history对象中；HashRouter刷新后会导致路由state参数的丢失但在V6版本中，HashRouter在页面刷新后不会导致路由state参数的丢失