前言
Hooks大行天下之后,关于如何使用 Hooks,如何替代Redux实现状态管理等文章甚嚣尘上,甚至介绍Redux-Hooks实现的文章也有很多,唯独少了全家桶三件套之一的React-Router的Hooks方法,让人有点惊异。其实React-Router4.0版本已经是一两年前的产品了,作者发布4.X时候也明确说过,除非React有重大更新,不然他们不会过多改动React-Router的实现,Hooks可以说让他们有一种好久不见的感觉。
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 <div>{slug}</div>;
}
ReactDOM.render(
<Router>
<div>
<Switch>
<Route path="/blog/:slug" component={BlogPost} />
</Switch>
</div>
</Router>,
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 <div>{slug}</div>;
}
ReactDOM.render(
<Router>
<div>
<Switch>
<Route path="/blog/:slug">
<BlogPost />
</Route>
</Switch>
</div>
</Router>,
document.getElementById("root")
);
在Route中我们可以不用写烦人的component了,只要记得用把页面包裹起来就行了,同时useParams的组件中也不用再写{match}了。
同时嵌套路由也变得更加简单了,我们如果需要两个params参数的话,只要在useParams中传递结构得到两个参数即可。
useLocation
这个钩子函数顾名思义,可以查看当前路由:
function BlogPost() {
const { slug } = useParams();
const location = useLocation();
console.log(location);
return <div>{slug}</div>;
}
控制台会输出:
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 (
<>
<button type="button" onClick={() => history.push("/blog/1")}>
123
</button>
<button type="button" onClick={() => history.goBack()}>
回去
</button>
</>
);
}
useRouteMatch
官方给了这个例子,是把match提出去让整个代码看起来更加有序,使用这个钩子函数可以让你匹配最接近route树的路由,不过我个人没有使用过,不清楚这个,等以后接触了再来补充。
// before
import { Route } from 'react-router-dom'
function App() {
return (
<div>
{/* ... */}
<Route
path="/BLOG/:slug/"
strict
sensitive
render={({ match }) => {
return match ? <BlogPost match={match} /> : <NotFound />
}}
/>
</div>
)
}
// after
import { useRouteMatch } from 'react-router-dom'
function App() {
let match = useRouteMatch({
path: '/BLOG/:slug/',
strict: true,
sensitive: true
})
return (
<div>
{/* ... */}
{match ? <BlogPost match={match} /> : <NotFound />}
</div>
)
}
————————————————
版权声明:本文为CSDN博主「eswang」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_43870742/article/details/102966040