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...