简介react-router-dom基本使用

本文详细介绍了React Router DOM的使用,包括如何通过`yarn add react-router-dom`安装,以及四大核心Hook:`useHistory`、`useLocation`、`useParams`和`useRouteMatch`的用法示例。通过这些Hook,开发者能够轻松地实现页面导航、获取当前URL信息、解析动态参数和进行路由匹配,从而更好地管理React应用中的路由状态。

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

1.下载包

yarn add react-router-dom 

2. 常用HOOK

  • useHistory:返回 history 对象,可以使用 useHistory 进行导航;
  • useLocation:返回当前URL的 location 对象,每当URL发生变化时,它都会返回一个新的位置;
  • useParams:动态参数列表的引用对象,用于获取<Route>中的 match.params (动态参数)
  • useRouteMatch:主要用于访问匹配数据,而无需实际渲染<Route>

3.基本使用

1.useHistory

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

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

  function handleClick() {
    history.push("/跳转位置");
  }

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

2.useLocation

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
);

3.useParams

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
);

4.useRouteMatch

useRouteMatch 尝试以与<Route>相同的方式匹配当前URL。

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

function BlogPost() {
  let match = useRouteMatch("url");

  // 匹配你想要匹配的url
  return <div />;
}
// ------等比于------
import { Route } from "react-router-dom";

function BlogPost() {
  return (
    <Route
      path="url"
      render={({ match }) => {
        // 匹配你想要匹配的url
        return <div />;
      }}
    />
  );
}

useRouteMatch 钩子也可以:

  • 不接受任何参数并返回当前<Route>
  • 接受单个参数,与matchPath的props参数相同。它可以是一个字符串形式的路径名(类似此例子),也可以是一个带有匹配道具的对象,例如:
const match = useRouteMatch({
  path: "url",
  strict: true,
  sensitive: true
});

### 反应路由器域与反应路由器的区别 #### 历史背景与发展 `react-router-dom` 是 `react-router` 的特定实现之一,专门用于浏览器环境中的React应用程序。随着Web开发的发展和技术栈的变化,路由库也经历了迭代更新以适应新的需求和最佳实践。 #### 主要差异点 ##### 1. 环境适配性 `react-router-dom` 特定于DOM环境中运行的应用程序,提供了针对HTML5历史API的支持以及链接处理等功能[^1]。相比之下,`react-router` 更像是一个抽象层,可以被不同平台的具体实现在之上构建,比如服务器端渲染(SSR),原生移动应用等场景下的变体如 `react-router-native`。 ##### 2. 组件集合的不同 两者都提供核心的路由管理功能,但在具体组件上有所区分: - **Link**: 在 `react-router-dom` 中存在 `<Link>` 组件来创建可点击的超链接,而在更通用版本里可能不存在此预定义组件。 - **BrowserRouter 和 HashRouter**: 这些是专门为客户端web页面设计的历史对象封装器,在 `react-router-dom` 提供了这两种方式让用户选择如何管理和同步URL状态变化;而基础版则不直接涉及这些概念[^2]. ```jsx import { BrowserRouter as Router } from 'react-router-dom'; function App() { return ( <Router> {/* 路由配置 */} </Router> ); } ``` ##### 3. API 设计哲学上的微调 虽然二者遵循相同的总体设计理念——即通过声明式的语法描述UI应该如何响应不同的路径匹配情况——但是在某些细节方面还是有细微差别。例如对于动态参数解析、嵌套路由支持等方面可能会有不同的表现形式或额外特性加入到 `react-router-dom` 当中去更好地服务于前端开发者的需求[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值