react router5 hook 文档翻译

最新推荐文章于 2024-11-08 11:13:45 发布

supming1

最新推荐文章于 2024-11-08 11:13:45 发布

阅读量214

点赞数

CC 4.0 BY-SA版权

分类专栏： react

原文链接：https://reactrouter.com/web/api/Hooks

react 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了React Router的四个主要Hooks：useHistory、useLocation、useParams和useRouteMatch。useHistory提供对历史记录的访问，常用于导航操作；useLocation则返回当前路由的位置信息，适用于页面访问统计；useParams用于获取URL参数，便于动态显示内容；而useRouteMatch则用于在不渲染Route的情况下匹配当前路由。这些Hooks使得在React组件中管理路由状态变得更加便捷。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Hooks

React Router 新增了几个 hooks，使你可以访问路由的 state并且在你的组件内部进行导航.

注意: 你需要 React >= 16.8 才能使用这些hook

`useHistory`

useHistory 这个 hook 使你能访问 history 实例.

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

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

`useLocation`

useLocation hook 返回当前路由的 location 对象.

这在你使用一些web统计工具的时候很有用，如你想在新页面加载的时候触发页面访问事件, 如下面例子:

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

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

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

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

`useParams`

useParams 返回URL参数的键值对对象. 用于访问当前路由的 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>;
}

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

`useRouteMatch`

useRouteMatch hook 跟<Route>一样，用于匹配当前路由 . 一般用于在没有渲染<Route>时，访问匹配数据

现在, 你不用这么干了

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

function BlogPost() {
  return (
    <Route
      path="/blog/:slug"
      render={({ match }) => {
        // Do whatever you want with the match...
        return <div />;
      }}
    />
  );
}

你可以这样：

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

function BlogPost() {
  let match = useRouteMatch("/blog/:slug");

  // Do whatever you want with the match...
  return <div />;
}

useRouteMatch hook 还可以:

不接收参数返回当前路由 object 对象
接收一个参数跟 props argument of matchPath 的参数.它可以是一个路径名字符串 (如上面例子) 也可以是如同 Route 的对象, 如下:

const match = useRouteMatch({
  path: "/BLOG/:slug/",
  strict: true,
  sensitive: true
});