开发者社区> 问答> 正文

在React Router v6中,如何使用Hooks来获取历史路由对象?

在React Router v6中,如何使用Hooks来获取历史路由对象?

展开
收起
迪哒迪滴喵 2024-08-13 18:23:00 67 0
1 条回答
写回答
取消 提交回答
  • 在React Router v6中,你可以使用useHistory Hook来获取历史路由对象,但需要注意的是,在v6版本中,useHistory已被重命名为useNavigate。如果你需要执行回退、跳转等操作,应该使用useNavigate Hook。不过,基于你给出的信息(可能是指v5或之前的版本),在v5中,你会这样使用useHistory:

    import { useHistory } from "react-router-dom"; 
    function HomeButton() { 
    const history = useHistory(); 
    function onClick() { 
    history.push("/home"); 
    } 
    return ( 
    <button type="button" onClick={onClick}> 
    跳转Home页 
    </button> 
    ); 
    }
    

    但在React Router v6中,应改为:

    import { useNavigate } from "react-router-dom"; 
    function HomeButton() { 
    const navigate = useNavigate(); 
    function onClick() { 
    navigate("/home"); 
    } 
    return ( 
    <button type="button" onClick={onClick}> 
    跳转Home页 
    </button> 
    ); 
    }
    
    2024-08-13 21:04:46
    赞同 1 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
利用编译将 Vue 组件转成 React 组件 立即下载
React Native 全量化实践 立即下载
React在大型后台管理项目中的工程实践 立即下载