@monajs/react-router v1.2.0

轻量赋能版 react-router

摒弃同类产品的劣根，汲取优秀产品的精华，结合数据管理的优势，打造出轻量实用幸福的产品，为react-router更好的赋能！！

大致介绍

这款轻量版 react-router 是基于 history api 和 hash 实现的，用户可以根据业务场景和需求选择 router 类型。

router 实现可以参考 对前端路由选择的思考

除此之外，@monajs/react-router 还融合了全局状态管理，用户可以将数据绑定在当前路径实例上，用户可以自由方便的通过路由来获取其他模块的数据。

依赖

• @monajs/events

安装

$ npm i --save @monajs/react-router

• 上手使用
• 如何实现页面间跳转
• 如何获取页面的信息
• 如何监听路由变化

上手使用

import React, { Component } from 'react';
import { render } from 'react-dom';
import Router from '@monajs/react-router';

import DefaultLayout from 'views/layout/default'
import NoMatch from 'pages/noMatch'
import Home from 'pages/home'

const routerConf =  {
	index: 'home',
	type: 'history',
	baseUrl: '',
	defaultLayout: DefaultLayout,
	routeList: [
		{
			layout: DefaultLayout,
			path: 'home/:name/:count',
			component: Home
		}, {
      path: 'test',
      component: NoMatch
		}
	]
}

render(<Router config={routerConf} />, document.getElementById('appWrapper'));

config 属性介绍

routeList 介绍

• layout 指的是页面采用的布局，可以为空
• routes 指的是页面的路径和页面实例的映射关系
• 当路由类型为 history 时，可以通过 /:的姿势配置 url 传参数形式

如何实现页面间跳转

import Router from '@monajs/react-router'

const Link = Router.link

...

<Link activeClassName="active" className="a" to={{ path: 'home/name/321?age=25', state: { a: 1 } }}>test</Link>
// <Link activeClassName="active" className="a" to='home/name/321?age=25'>test</Link>

Link 组件 api

• 当路由类型为 history 时，可以通过设置 state 值来传递 history 的 state 属性

api 跳转

import Router from '@monajs/react-router'

...

Router.go ('404', {name: 'yangxi'}, 'title', {s: 'state'})

Router.go 方法参数

Router.go (path, data, title = '', state = {})

如何获取页面的信息

获取本页面信息

import Router from '@monajs/react-router'

...

console.dir(Router.current)

获取其他面信息

import Router from '@monajs/react-router'

...

console.dir(Router.routeInfo)

下面来介绍一下都包含哪些信息

如何监听路由变化

import Router from '@monajs/react-router'
...

Router.addEventListener('onChange', (res) => {
	console.log(res)
})

如何监听路由未匹配

import Router from '@monajs/react-router'
...

Router.addEventListener('onMiss', () => {
	console.log('miss Router')
})

联系我

微信：yx12032331