React-Router 的 Hooks

最新推荐文章于 2024-03-26 00:00:00 发布

清雅白鹿记

最新推荐文章于 2024-03-26 00:00:00 发布

阅读量363

点赞数 6

文章标签： react.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.csdn.net/weixin_41205556/article/details/135976939

版权

React-Router 5.1引入了useHistory, useLocation, useParams和useRouteMatch四个Hooks。useParams简化了获取路由参数的方式，无需再写冗余代码。useLocation提供当前路由信息，常与useEffect结合使用。useHistory允许返回上一页面。useRouteMatch则用于在无需实际呈现的情况下获取匹配数据。这些Hooks使得React应用中的路由管理更加便捷。" 96904494,8584932,自定义View实现雷达图与刻度值绘制,"['Android开发', '自定义组件', '图形绘制']

摘要由CSDN通过智能技术生成

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怎么做呢&#x