简介
tmp-mobx-router-ep 是一款基于 mobx 和 react-router 的前端路由管理库，可以帮助我们更加方便地管理浏览器地址栏和应用状态之间的映射关系，使得前端路由应用的开发更加便捷。
安装
要使用 tmp-mobx-router-ep，我们首先需要在命令行中使用 npm 安装该库。
npm install tmp-mobx-router-ep --save
快速上手
使用 tmp-mobx-router-ep 非常简单，在入口页面中创建一个 Router 对象，设置好各个页面对应的路由规则，然后在每个页面组件里面获取当前路由信息就可以了。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------- ------ ---- - ---- ---------------
------ - -------------------- - ---- ----------
------ - -------- - ---- -------------
------ - ------------- - ---- ---------------------
----- ----- - ----------- -- -
----- ------ - ----------------
------ -
-----
-------- ------
---------- ------ ------------------------------
----- -------------- -- ---- --------
------
--
---
----- ----- - ----------- -- -
----- ------ - ----------------
------ -
-----
-------- ------
---------- ------ ------------------------------
----- --------- ---- -- ---- --------
------
--
---
----- ------- - -----------------------
----- ------ - --- ----------------
------------------- ---------- --------
------------------- --------------- --------
----------------
--------------- ----------------
----------- --
------------------
-------------------------------
--上面的例子展示了 tmp-mobx-router-ep 的基本用法。我们首先创建了两个页面组件 Page1 和 Page2，每个页面组件里面都使用 useMobxRouter hook 获取当前路由信息，并渲染出页面内容和跳转链接。
然后我们使用 createBrowserHistory 创建一个浏览器路由对象 history，并创建一个 Router 对象，并添加两个路由规则，分别将路径 / 和 /page2 分别映射到 Page1 和 Page2 上。
最后，我们在入口组件中使用 RouterProvider 和 RouterView 对象分别渲染这个 Router 和它所对应的页面组件。
API
Router
Router 是 tmp-mobx-router-ep 中最重要的对象，它是整个路由系统的核心。我们可以通过 Router 来创建路由规则，监听路由变化，并控制页面的跳转。
addRoute()
addRoute(route: Route): void
用于添加一个路由规则。在页面中添加一个路由规则有两种方法，一种是调用 Router 对象的 addRoute() 方法，另一种是直接在组件中使用 <Route> 组件。
在使用 addRoute() 方法添加路由规则时，我们需要传入一个 Route 对象作为参数，这个 Route 对象包含两个属性：path 和 component。其中，path 表示这个路由规则所对应的路径，component 是这个路由规则所对应的页面组件。
import { createBrowserHistory } from 'history';
import { Router, Route } from 'tmp-mobx-router-ep';
const history = createBrowserHistory();
const router = new Router(history);
router.addRoute(new Route('/', Home));
router.addRoute(new Route('/about', About));listen()
listen(callback: Function): Function
用于监听路由变化。当路由发生变化时，我们需要执行一些操作，比如更新页面状态等。我们可以通过 listen() 方法来监听路由变化事件，并在回调函数中实现相应的操作。
-- -------------------- ---- ------- ------ - -------------------- - ---- ---------- ------ - ------ - ---- --------------------- ----- ------- - ----------------------- ----- ------ - --- ---------------- ---------------------- -- - -------------------------------------- ---
navigate()
navigate(path: string): void
用于控制页面的跳转。在页面中，我们需要实现一些跳转业务，比如点击链接跳转到其他页面等，可以使用 navigate() 方法来实现。
-- -------------------- ---- ------- ------ - -------------------- - ---- ---------- ------ - ------ - ---- --------------------- ----- ------- - ----------------------- ----- ------ - --- ---------------- ----- ------ - -- -- - --------------------- -- ----- ------ ------------------- ---- -- -----------
Route
Route 是 tmp-mobx-router-ep 中的路由规则对象，用于描述一个路由规则，包括该路由规则所对应的路径和组件。
setPath()
setPath(path: string): void
用于设置路由规则的路径，即该路由规则所对应的访问路径。
const route = new Route();
route.setPath('/');setComponent()
setComponent(component: React.ComponentType): void
用于设置路由规则所对应的页面组件。
const route = new Route(); route.setComponent(Home);
path
path: string
一个只读属性，表示路由规则所对应的路径。
const route = new Route('/', Home);
console.log(route.path); // 输出 "/"component
component: React.ComponentType
一个只读属性，表示路由规则所对应的页面组件。
const route = new Route('/', Home);
console.log(route.component); // 输出 Home 组件RouterProvider
RouterProvider 是 tmp-mobx-router-ep 中的上下文组件，用于向子组件传递 Router 对象。
router
router: Router
一个必选属性，代表要传递给子组件的 Router 对象。
-- -------------------- ---- -------
------ - -------------------- - ---- ----------
------ - ------- ----- - ---- ---------------------
----- ------- - -----------------------
----- ------ - --- ----------------
----- --- - -- -- -
------ -
--------------- ----------------
----------- --
-----------------
--
--
-------------------- --- ---------------------------------useMobxRouter()
useMobxRouter() 是 tmp-mobx-router-ep 提供的 hook，用于在页面组件中获取当前路由信息。
-- -------------------- ---- -------
------ - ------------- - ---- ---------------------
----- ---- - -- -- -
----- ------ - ----------------
------ -
-----
-------------
---------- ------ ------------------------------
------
--
--示例代码
下面是一个完整的示例，演示了如何使用 tmp-mobx-router-ep 来开发一个简单的路由应用。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------- ------ ---- - ---- ---------------
------ - -------------------- - ---- ----------
------ - -------- - ---- -------------
------ - ------------- - ---- ---------------------
----- ----- - ----------- -- -
----- ------ - ----------------
------ -
-----
-------- ------
---------- ------ ------------------------------
----- -------------- -- ---- --------
------
--
---
----- ----- - ----------- -- -
----- ------ - ----------------
------ -
-----
-------- ------
---------- ------ ------------------------------
----- --------- ---- -- ---- --------
------
--
---
----- ------- - -----------------------
----- ------ - --- ----------------
------------------- ---------- --------
------------------- --------------- --------
----------------
--------------- ----------------
----------- --
------------------
-------------------------------
--总结
tmp-mobx-router-ep 为前端路由的开发提供了一种全新的思路和解决方案，我们可以通过 tmp-mobx-router-ep 更加方便地管理浏览器地址栏和应用状态之间的映射关系，从而提高应用的开发效率和用户体验。在开发过程中，我们可以结合 mobx 和 react-router 等技术库来实现更为复杂的路由逻辑，并提升应用的性能和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d7a81e8991b448db36b