npm包react-router-dom使用教程-FunTeaLearn Online Web Tutorials

介绍

React Router是一个用于在React应用程序中实现导航的库。它提供了一种使得URL和组件之间进行映射的方式，使用户能够通过浏览器地址栏中的URL访问不同的页面。React Router支持多种路由器，包括HashRouter, BrowserRouter, MemoryRouter和NativeRouter等。

本文主要介绍通过npm包react-router-dom来实现路由操作的方法。

安装React Router

首先，我们需要安装React Router。在命令行中输入以下命令：

npm install react-router-dom

配置路由

在项目中新建路由文件，并在其中进行路由配置。我们可以通过下列代码创建两个路由：

-- -------------------- ---- -------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------

-------- ----- -
  ------ -
    --------
      --------
        ------ ----- -------- ---------------- --
        ------ ------------- ----------------- --
      ---------
    ---------
  --
-

------ ------- ----

这里我们引入了BrowserRouter、Route和Switch，其中BrowserRouter是React Router中提供的路由容器，Route是路由规则，Switch会在匹配到第一个路由时停止匹配。exact属性表示路径严格相等才匹配。

路由跳转

在应用程序中，我们可以通过Link组件或编程式导航来实现路由跳转。

Link组件

Link组件是React Router提供的导航组件，它可以将页面的不同部分链接在一起。我们可以通过下列代码创建一个Link：

-- -------------------- ---- -------
------ - ---- - ---- -------------------

-------- ------ -
  ------ -
    -----
      -------------
      ----
        --------- -----------------------------
      -----
    ------
  --
-

------ ------- -----

这里我们引入了Link组件，并使用to属性指定要跳转到的路径。

编程式导航

在某些情况下，我们需要在代码中进行路由跳转，而非通过用户操作触发。React Router提供了history对象来实现编程式导航。我们可以通过下列代码实现编程式导航：

-- -------------------- ---- -------
------ - ---------- - ---- -------------------

-------- ------ -
  ----- ------- - -------------

  -------- ------------- -
    -----------------------
  -

  ------ -
    -----
      -------------
      ------- ------------------------ -- ----- -------------
    ------
  --
-

------ ------- -----

这里我们引入了useHistory钩子函数，并使用push方法实现跳转。

路由传参

在某些情况下，我们需要将数据从一个页面传递到另一个页面。React Router支持通过URL参数、查询参数和状态来实现路由传参。

URL参数

URL参数是指在URL中以/:param的形式传递参数。我们可以通过下列代码获取URL参数：

-- -------------------- ---- -------
------ - --------- - ---- -------------------

-------- ------ -
  ----- - -- - - ------------

  ------ -
    -----
      -------- ---------
    ------
  --
-

------ ------- -----

这里我们引入了useParams钩子函数，并使用{id}来获取URL参数。

查询参数

查询参数是指在URL中以?key=value的形式传递参数。我们可以通过下列代码获取查询参数：

-- -------------------- ---- -------
------ ----------- ---- ---------------

-------- -------- -
  ----- - ------ - - --------------
  ----- - - - - --------------------------

  ------ -
    -----
      ----------- --------
    ------
  --
-

------ ------- -------

这里我们引入了queryString库来解析查询参数，使用useLocation钩子函数获取当前路由的location对象，从而获取

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/32211

npm包react-router-dom使用教程

介绍