使用 Hook 替代 withRouter

在 React 16.8 版本引入 Hook 之后，React Router DOM 就提供了通过 Hook 函数向组件中注入 History 对象、Location 描述对象等用于访问和控制路由的对象的方法。React Router DOM 提供的 Hook 方法主要有以下四个。

• useHistory()，不接受任何参数，直接返回当前路由的 History 对象，可用于控制路由导航。
• useLocation()，不接受任何参数，直接返回当前匹配路由的 Location 描述对象，可用于获取当前的 URL 地址。
• useParams()，不接受任何参数，直接返回一个键值对对象，其中保存了所有的路径参数，允许直接访问 match.params，通常会采用解构赋值的方式从其中提取参数内容。
• useRouteMatch()，用于提供类似于 <Route> 组件的功能，尤其适用于在不渲染任何路由组件的情况下使用路由路径 Match 描述对象。

以下给出一个使用 useHistory() 和 useParams() 的示例。

function ContentPost() {
  let { author } = useParams();
  let history = useHistory();

  return (
    <div>
      <p>{author}</p>
      <button type="button" onClick={() => history.push('/')}>
        Click to return
      </button>
    </div>
  );
}

使用 useRouteMatch() 可以将以下示例简化。

function ContentPost() {
  return <Route path="/post/:id" render={({ match }) => <div />} />;
}

使用 useRouteMatch() 之后：

function ContentPost() {
  let match = useRouteMatch('/post/:id');

  return <div />;
}