最近在网上学习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参数的丢失