开发者社区 问答 正文

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

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

展开
收起
迪哒迪滴喵 2024-08-13 18:23:00 172 分享 版权
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 展开评论