什么是 fun-router？
fun-router 是一个用于前端路由的 npm 包。它可以帮助开发者快速搭建基于路径的前端路由系统，并且支持多级路由和嵌套式路由。
安装和使用
安装
您可以通过 npm 来安装 fun-router：
npm install fun-router
或者使用 yarn 安装：
yarn add fun-router
使用
fun-router 可以在任何支持 ES6 模块的环境中使用，例如 React、Vue 和 Angular。下面是一个在 React 中使用 fun-router 的示例：
-- -------------------- ---- -------
------ - ------- ----- - ---- ------------
-------- ----- -
------ -
--------
------ -------- ----- ---------------- --
------ ------------- ----------------- --
---------
-
-
-------- ------ -
------ -------------
-
-------- ------- -
------ --------------
-路由匹配规则
fun-router 支持常见的路由匹配规则：
/path：精确匹配/path/:param：带参数匹配，例如/users/:id/path/*：通配符匹配，例如/path/*
在路由匹配时，fun-router 会按照下面的规则依次匹配路由：
- 精确匹配
- 带参数匹配
- 通配符匹配
嵌套路由
fun-router 支持嵌套式路由。例如，我们可以把 /users 下的子路由放到一个独立的组件中，并使用 <Route> 组件进行注册：
-- -------------------- ---- -------
------ - ------- ----- - ---- ------------
-------- ----- -
------ -
--------
------ -------- ----- ---------------- --
------ ------------- ----------------- --
---------
-
-
-------- ------ -
------ -------------
-
-------- ------- -
------ -
-----
--------------
------ ------------- ----- -------------------- --
------ ----------------- ---------------------- --
------
-
-
-------- ---------- -
------ -------- ---------
-
-------- ------------ ----- -- -
----- - -- - - ------------
------ -------- ------- ---------
-在上面的例子中，我们在 /users 下注册了两个子路由：/users 和 /users/:id。这样我们就可以在一个独立的组件中处理所有 /users 相关的路由了。
API
<Router>
<Router> 是 fun-router 包中的一个高阶组件。它需要被包含在整个路由系统的根节点中，并且必须包含所有的 <Route> 组件。
<Router>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Router><Router> 组件支持下面的 props：
history：自定义路由历史记录，默认为window.historybasename：应用程序的基本路径，会被自动添加到所有的路由路径中location：自定义当前路由的地址，可以手动覆盖当前浏览器地址栏中的地址onChange：当路由发生改变时触发的回调函数
<Route>
<Route> 组件用来指定某个路径的页面组件。当路由匹配时，与之匹配的 <Route> 组件会被渲染到页面中。
<Route path="/about" component={About} /><Route> 组件支持下面的 props：
path：路由路径，支持精确匹配、参数匹配和通配符匹配exact：是否开启精确匹配模式，默认为falsechildren：在<Route>组件内部嵌套的子路由component：要渲染的页面组件render：用于自定义路由匹配后要渲染的组件props：传递给组件的 props 参数
withRouter
withRouter 是一个高阶组件，用于将当前路由信息注入到组件的 props 参数中。
import { withRouter } from 'fun-router'
function MyComponent({ location }) {
return <h1>Current Path: {location.pathname}</h1>
}
export default withRouter(MyComponent)自定义路由系统
fun-router 可以通过 history 和 location 参数来自定义路由系统。这意味着您可以使用自己的路由逻辑替换默认的浏览器路由。
-- -------------------- ---- -------
------ - ------------------- - ---- ---------
------ - ------- ----- - ---- ------------
----- ------- - ---------------------
-------- ----- -
------ -
------- ------------------
------ -------- ----- ---------------- --
------ ------------- ----------------- --
---------
-
-
-------- ------ -
------ -------------
-
-------- ------- -
------ --------------
-总结
fun-router 是一个轻量级的前端路由库，可以帮助开发者快速搭建基于路径的前端路由系统。它支持多级路由和嵌套式路由，同时还提供了丰富的 API 和自定义路由系统功能。希望通过这篇文章您能够掌握 fun-router 的使用方法，并在实际项目中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663181e8991b448e21f1