前言
MST-React-Router 是一款基于 Mobx-State-Tree 和 React 的路由转换器。它能够自动同步 React 组件与 Url 之间的状态。在本篇文章中,我们将介绍它的使用方法。如果你是一个 React 开发者,那么这篇文章将对你的工作有着深远的指导意义。
安装
你可以在命令行窗口中通过使用 npm 安装 mst-react-router。
npm install mst-react-router --save
用法
首先,你需要在你的 index.js
文件中引用 mst-react-router
。
import { MSTRouterProvider } from 'mst-react-router';
接下来,我们需要创建一个 URL 和它所对应的 React 组件之间的映射。这可以通过一个常量对象来实现。下面是一个例子。
-- -------------------- ---- ------- ------ - ----- - ---- ------------------ ------ - --------- - ---- ------------------- ----- ----------- - ------------------ ------- - ---- ----------- -------------- ---------------- -------------------- ------------- -- --- ------ ----- --------- - ----- -------- ------- ------------ -- --- -- ------------- -- -- -- --- ----
这段代码创建了一个简单的路由映射。在我们的根 Store 中,我们初始化了 mst-react-router
并且将其挂载到了根 Store 中。
我们可以在组件中通过使用 HOC(高阶组件)的方式引入路由信息。
-- -------------------- ---- ------- ------ - ------------- - ---- ------------------- -------------- ----- ---------- ------- --------------- - -------- - ----- - ------ - ------- - -------- -- -- - - ----------- ------ - ----- ---------- ---- --------------- ------ -- - -
在上面的例子中,我们使用了 withMSTRouter
HOC 来加入了对路由信息的支持。match
对象包含了路由信息,诸如参数、查询字符串等。
相信你已经注意到了我们在路由映射对象中使用了 /course/:courseId
格式的路由模板。这种模板能够用于匹配所有的 /course
路径,并捕捉 courseId
作为一个参数。这些参数可以在组件中的 match.params
属性中访问到。如下所示:
const { match: { params: { courseId }, }, } = this.props;
你也可以在组件中使用 push
方法来更新 URL。
const handleClick = () => { const { router } = this.props; router.push('/my-profile'); };
在上述例子中,我们使用 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