router6 之两种导航方式

42 阅读1分钟

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>
    )
}