react router -- Hooks

react router之Hooks

Hooks

React Router带有几个钩子，允许你访问路由器的状态并从组件内部执行导航
note：需要使用React>=16.8版本才能使用这些钩子！

• useHistory
• useLocation
• useParams
• useRouteMatch

一、useHistory

useHistory钩子允许你访问可用于导航的历史实例

按官网原代码书写：

function HomeButton() {
   
    let history = useHistory();
    
    function handleClick() {
   
        history.push("/home");
        //console.log(history);
    }
    function BackClick() {
   
        history.goBack();
        //console.log(history);
    }
    return (
        <div>
            <button type="button" onClick={
   handleClick}>Go Home</button>
            <button type="button" onClick={
   BackClick}>Go Back</button>  //自己增加的
        </div>
    )
}

ReactDOM.render(
    <Router>
        <HomeButton/>
    </Router>,
    document.getElementById("root")
)

点击按钮Go Home后，浏览器本地url会进入到/home，如图所示：

这里点击Go Home之后，console.log了一下hi