npm 包 mst-react-router 使用教程

阅读时长 4 分钟读完

前言

MST-React-Router 是一款基于 Mobx-State-Tree 和 React 的路由转换器。它能够自动同步 React 组件与 Url 之间的状态。在本篇文章中,我们将介绍它的使用方法。如果你是一个 React 开发者,那么这篇文章将对你的工作有着深远的指导意义。

安装

你可以在命令行窗口中通过使用 npm 安装 mst-react-router。

用法

首先,你需要在你的 index.js 文件中引用 mst-react-router

接下来,我们需要创建一个 URL 和它所对应的 React 组件之间的映射。这可以通过一个常量对象来实现。下面是一个例子。

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

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

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

这段代码创建了一个简单的路由映射。在我们的根 Store 中,我们初始化了 mst-react-router 并且将其挂载到了根 Store 中。

我们可以在组件中通过使用 HOC(高阶组件)的方式引入路由信息。

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

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

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

在上面的例子中,我们使用了 withMSTRouter HOC 来加入了对路由信息的支持。match 对象包含了路由信息,诸如参数、查询字符串等。

相信你已经注意到了我们在路由映射对象中使用了 /course/:courseId 格式的路由模板。这种模板能够用于匹配所有的 /course 路径,并捕捉 courseId 作为一个参数。这些参数可以在组件中的 match.params 属性中访问到。如下所示:

你也可以在组件中使用 push 方法来更新 URL。

在上述例子中,我们使用 push 方法将路由推向了 /my-profile

withMSTRouter HOC 还有一些其他的功能,例如 location 对象、history 对象以及 query 对象的访问等等。这些可以在 mst-react-router 的官方文档中找到详细的介绍。

结尾

这篇文章已经为你提供了一个快速且简便的方法来实现 React 应用程序中的路由转换。mst-react-router 提供了优秀的 Mobx-State-Tree 和 React 集成体验,能够使你的应用程序更加健壮和快速。如果你有兴趣深入学习 mst-react-router 的话,建议您查看其官方文档和示例代码。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/the-mst-react-the-router