react-router-dom hooks 部分翻译

react-router-dom hooks翻译

Hooks

随着 react-router-dom v5.0 的发布，react-router-dom 跟随 react 的版本更新，发布了react-router-dom hooks 一众组件。react-router-dom 的作用主要是当使用者在使用 react hooks 有相应的配套的 react-router-dom hooks 可以使用，简化操作步骤。

Hooks

React Router 附带一些钩子函数，让你可以访问组件内部路由的状态，并在组件内部实行导航。

需要注意的是：为了使用一下的任意钩子函数，你的 React 版本必须大于16.8。16.8 react 团队正式发布了hooks

useHistory
useLocation
useParams
useRouteMath

useHistory

useHistory 钩子允许你访问 history 实例，你可以通过 history 实例来进行导航。

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();
  function hanldeClick() {
    history.push("/home");
  }
  return (
  	<button type="button" onClikc={hanleClick}> Go Home</button>
  )
}

这里需要注意的是，必须在 BrowserRouter 等一类的父组件下，才能使用useHistory，否则无法获取 useHistory() 对象。获取出来的location为undefined。

useLocation

useLocation 钩子会返回代表当前 URL 地址的 location 对象。你可以将 useLocation 想象成一个 useState 钩子，每当 URL 发生改变，都会返回一个 location。

useLocation 在以下情况可能是非常有用的。比如，在你希望每次加载新页面都是用Web分析工具触发新的“页面浏览”时间，如下：

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  useLocation
} from "react-router-dom";

function usePageView() {
  let location = useLocation();
  React.useEffect(() => {
    ga.send(["pageview", location.pathname]);
  }, [location])
}

function App() {
  usePageViews();
  return <Switch></Swtch>
}

ReactDOM.render(
  <Router>
  	<App />
  </Router>
);

useParams

useParams 返回一个包含 URL 参数的键值对对象。使用它来访问当前 <Route> 的 match.params 对象。

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams
} from "react-router-dom";

function BlogPost() {
  let { slug } = useParams();
  return <div>Now showing post { slug }</div>;
}

function Home() {
  return (
  	<div>
    	<h1>Home Page</h1>
    </div>
  )
}

ReactDOM.render(
	<Router>
  	<Switch>
    	<Router exact path="/">
      	<HomePage />
      </Router>
      <Route path="/blog/:slug">
      	<BlogPost />
      </Route>
    </Switch>
  </Router>
);

useRouteMatch

useRouteMatch 钩子尝试以和 <Route> 相同的方式来匹配当前的 URL 地址。它主要用于无需在渲染一个 <Route> 组件来获取 match 数据。

import { Route } from "react-router-dom";
function BlogPost() {
  return (
  	<Route
      path="/blog/:slug"
      render={({ match }) => {
        return <div>匹配成功</div>
      }}
  )
}

通过 useRouteMatch，你可以这样改写上面的例子：

import { useRouteMatch } from "react-router-dom";
function BlogPost() {
  let match = useRouteMatch("/blog/:slug");
  return <div>哦豁</div>
}

useRouteMatch 钩子只有一个参数，这个参数和 matchPath 的 props 参数相同。它可以是一个字符串类型的 pathname，也可以是像 Route 所接受的 matching 参数。当你在一个无状态组件中使用 useRouteMath 之后，该组件即可代替 Route 组件。

const match = useRouteMath({
  path: "/Blog/:slug",
  strict: true,
  sensitive: true,
})