5.1版本的React-Router，带来了useHistory，useLocation，useParams，useRouteMatch四个钩子函数。
useParams
这个函数什么用呢？首先我们看一个不适用hooks读取路由params的方法：
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
function BlogPost({ match }) {
let { slug } = match.params;
return {slug};
}
ReactDOM.render(
,
document.getElementById("root")
);可以看到，我们必须使用match来获取路由中的params。
那么如果使用useParams怎么做呢？
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Route,
Switch,
useParams
} from "react-router-dom";
function BlogPost() {
let { slug } = useParams();
return {slug};
}
ReactDOM.render(
,
document.getElementById("root")
);在Route中我们可以不用写烦人的component了，只要记得用把页面包裹起来就行了，同时useParams的组件中也不用再写{match}了。
同时嵌套路由也变得更加简单了，我们如果需要两个params参数的话，只要在useParams中传递结构得到两个参数即可。
useLocation
这个钩子函数顾名思义，可以查看当前路由：
function BlogPost() {
const { slug } = useParams();
const location = useLocation();
console.log(location);
return {slug};
}控制台会输出:
Object {pathname: "/blog/4", search: "", hash: "", state: undefined}
pathname: "/blog/4"
search: ""
hash: ""
state: undefined一般和useEffect一起用，大家自己思考业务场景吧。
useHistory
这个API还会大改，只是useNavigate的一个雏形，也是很好理解，可以返回上一个网页：
function BackButton() {
let history = useHistory();
return (
<>
);
}useRouteMatch
useRouteMatch挂钩尝试以与URL。在无需实际呈现
// before
import { Route } from 'react-router-dom'
function App() {
return (
{/* ... */}
{
return match ?
)
}
// after
import { useRouteMatch } from 'react-router-dom'
function App() {
let match = useRouteMatch({
path: '/BLOG/:slug/',
strict: true,
sensitive: true
})
return (
{/* ... */}
{match ? 参考：
https://blog.csdn.net/weixin_...
https://reacttraining.com/rea...