react-router-dom v6的变化

原创

已于 2022-05-12 15:29:56 修改 · 1.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-05-12 15:28:09 首次发布

react-router-dom v6带来了重大变化，包括：1) `useNavigate` 替代 `useHistory`，提供了新的导航钩子；2) `element` 代替 `component`，简化配置；3) `useRoutes` 的引入，用于集中式路由配置；4) `Routes` 代替 `Switch`，实现更智能的路由匹配；5) 引入 `Outlet` 组件，简化嵌套路由的处理。这些改动提升了路由管理的灵活性和易用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-router-dom v6

原文地址

1、useNavigate替代useHistory

在v6版本useHistory被新hookuseNavigate代替，用法也发生的很大的变化

//v5
import {
   
   useHistory} from 'react-router-dom'

function ChangePage(){
   
   
    const history = useHistory()
    const handleClick = () => {
   
   
        history.push('/home')
        //history.replace('/home')
        //history.go(-1)
        //history.goback()
        //history.goForward()
    }
    return(
        <button onClick={
   
   handleClick}>跳转</button>
    )
}