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
useRouteMatch
挂钩尝试以与<Route>
相同的方式匹配当前URL
。在无需实际呈现<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>
)
}
参考:
https://blog.csdn.net/weixin_...
https://reacttraining.com/rea...
推荐阅读
alicdn边缘节点不稳定导致页面崩溃问题
某工作日,线上某用户向客服专员反馈没法正常访问“查看报价页面”,页面内容没有呈现。客服专员收到反馈后,将问题转交给SRE处理。很奇怪的是,SRE访问生产环境“查看报价页面”显示正常,为了进一步分析定位问题,S...
记得要微笑阅读 722
react-useTransition hook基础使用
react提供了useDeferredValue发挥类似防抖节流的作用,而useTransition也是类似的作用,但是该hook是通过降低数据渲染的优先级来达到优先更新其他数据
Bill阅读 357
useState和useImmer有什么不同?
简而言之,immer简化了改变嵌套/复杂数据结构的方式。看看这两种方式:先看useState的使用方法 {代码...} 为了对此进行操作,您应该传递整个对象并覆盖您希望更新/更改的属性: {代码...} 但是,如果您使用"useIm...
mcgrady阅读 221
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。