1.声明式路由导航
import React from 'react'
import {Link, NavLink} from 'react-router-dom'
<Link to="xxx"></Link>
<NavLink to="xxx"></NavLink>
某些场景下声明式路由导航是无法满足需求的,这时候需要用到另一种导航方式,编程式路由导航
2.编程式路由导航
import React from 'react'
import {useNavigate} from 'react-router-dom'
function Message(){
const showDetail =(item)=>{
navigate('detail', {
replace: false,
state: {
id: item.id,
title: item.title,
content: item.content
}
})
}
return (
<button
onClick={()=>showDetail({id: '001', title: '消息1', content: '1111'})}>
查看详情
</button>
)
}