React-Router 新版本带来的 Hooks

 2020年12月13日 分类:React/前端设计  评论(0)  阅读(1846)

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…

来源:https://segmentfault.com/a/1190000022445986?utm_source=tag-newest

wechat_app
微信公众号:webapp_club
关注一下,或许能让你获得更多前端咨询信息。
加载中...
分享中心

评论 抢沙发

评论前必须登录


如果你觉得本站内容对你有所帮助,比如提升你对编程方面的认识,你可以通过上面的二维码请博主喝杯咖啡,安好。

WEB前端开发部落(公众号:webapp_club)

群列表

前端初级学习群:初级Web前端学习群(后期为支付入群)
PHP初级学习群:PHP(MySQL)学习交流群
QQ群仅作为相关领域讨论平台,均提供高质量问题交流,禁止闲聊,无法接受的朋友请勿加群!
进群需要通过这里获取进群码才能进群哦!