react路由相关的hooks

在非路由跳转的组件里，要获取路由上下文对象，除了可以使用高阶组件withRouter外，react-router-dom里还提供了hooks。

useHistory()：

useHistory 返回一个 路由上下文上的history 对象

import { useHistory } from "react-router-dom";
​
export default (props)=>{
    let history = useHistory();
    console.log("我是用户添加页面:props",props);
    return (
        <div>
            <h1>我是用户添加页面</h1>
            <input type="button" value="跳转" onClick={()=>history.push("/")} />
        </div>
    );
}

useLocation()

useLocation() 返回一个路由上下文的 location 对象。

<Link to={{pathname:"/User",query:{"id":"01002"}}}>用户管理</Link>
​
import { useHistory,useLocation } from "react-router-dom";
​
export default ()=>{
    let location = useLocation();
    let history = useHistory();
    console.log("location",location);
    return (
        <div>
            <h1>我是用户添加页面</h1>
            <input type="button" value="跳转" onClick={()=>history.push("/")} />
        </div>
    );
}

useParams()

useParams() 返回当前匹配的路径上的 params

<Link to={{pathname:"/User/01003"}}>用户管理</Link>

import { useHistory,useLocation,useParams } from "react-router-dom";

export default ()=>{ let location = useLocation(); let history = useHistory(); let params = useParams();

console.log("location",location);
console.log("params",params);
​
return (
    <div>
        <h1>我是用户添加页面</h1>
        <input type="button" value="跳转" onClick={()=>history.push("/")} />
    </div>
);
}

useRouteMatch

useRouteMatch 可以有一个参数 path，如果什么都不传，会返回当前 context 上的 match 的值，一定是 true。如果传了 path，会比较这个 path 和当前 location 是否 match。