前言
在前端开发中，路由是一个非常重要的概念。当我们使用 React、Vue 等框架开发单页应用时，路由管理是必不可少的一项工作。而在路由管理中，往往需要处理「非法路径」或者所谓的「404」页面。而 no-match 这个 npm 包，提供了一种简单易用的方案，用于处理这种情况。
安装
使用 npm 可以很容易地将 no-match 添加至项目中：
npm install no-match --save
安装完成后，在需要使用的地方进行引用即可：
import { NoMatch } from 'no-match';使用
使用 no-match 相当简单，其提供了一个 NoMatch 组件，在路由匹配不到任何路径时会自动渲染该组件。以下是示例代码：
-- -------------------- ---- -------
------ - ------------- -- ------- ------- ----- - ---- -------------------
------ - ------- - ---- -----------
-------- ----- -
------ -
--------
--------
------ ----- ---------
--- ---- --------- ---
--------
------ --------------
--- ----- --------- ---
--------
------ ----------------
--- ------- --------- ---
--------
------ ---------
-------- --
--------
---------
---------
--
-如上所示，当路由匹配不到任何路径时，会自动渲染 NoMatch 组件，并显示指定的内容。
高级使用
NoMatch 不仅仅只是作为路由不存在时的备胎，它还可以作为一个组件来使用。以下是示例代码：
-- -------------------- ---- -------
------ - ------- - ---- -----------
-------- ------------- -
----- ------ -------- - -----------
------------ -- -
-----------------------
-------------- -- ----------------
---------- -- --------------
------------ -- -
---------------------
---------------- ------------- ------ -- ------ ----
---
-- ----
------ -
-----
----- - -
-- ------ ----
- - -
-- ------ ------- ---------
-------- ---------------- -------- --
--
------
--
-如上所示，可以将 NoMatch 组件作为一个状态来使用，在请求数据失败时渲染为 NoMatch 组件，方便进行数据加载后备等操作。
总结
no-match 是一个非常值得使用的 npm 包，它为我们提供了一种简单易用的方案，解决了前端路由中无法匹配路径的问题。同时，NoMatch 也可以作为一个组件来使用，更具有灵活性和实用性，值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005535781e8991b448d090c