习惯了 vue-router 路由的用法, 再用 react-router 总感觉挺麻烦的.
那么 react 有没有用法跟 vue-router 一样使用简单的路由插件呢?
管它有没有, 轮子我已经造好了, 请收下.
- react-concise-router
- react-concise-router
是一个基于 react-router v4.x https://github.com/ReactTraining/react-router 封装的一个路由插件.
1, 安装
直接安装
npm install -S react-concise-router
复制代码
你还需要安装
npm install -S react-router
复制代码
npm install -S react-router-dom
复制代码
2, 定义路由列表对象
- router.js
- import Router from 'react-concise-router'
- import Home from './views/Home'
- import User from './views/User'
- import UserInfo from './views/UserInfo'
- import ErrorPage from './views/Error'
- import view from './views/admin/view'
- import Dashboard from './views/admin/Dashboard'
- const router = new Router ({
- mode: 'hash',
- routes: [ {path: '/', component: Home},
- {path: '/user', component: User},
- {path: '/user/:userId', name: 'info', component: UserInfo},
- {
- path: '/admin',
- component: view,
- name: 'admin-view',
- children: [
- {path: '/', component: Dashboard},
- {path: '/test', component: Dashboard},
- {component: ErrorPage}
- ]
- },
- {path: '*', component: ErrorPage},
- ]
- })
- export default router
复制代码
- App.jsx
- import React from 'react'
- import router from './router'
- export default class App extends React.Component {
- render () {
- return (
- <div>
- <p>wellcome !</p>
- <router.view />
- </div>
- )
- }
- }
复制代码
API
new Router(options) 创建路由对象, 返回 router.
options object 路由配置的对象
options.mode string 定义路由类型, hash|history
options.routes array 路由列表
options.routes[].name string 路由名称, 如果当前存在 children 属性, 表示路由出口名称
options.routes[].path string 路径
options.routes[].component Function 路由组件; 如果当前存在 children 属性, 表示子路由组件
options.routes[].children array 子路由列表
options.path 不存在或者为 * 路由会当做 notMath 路由, 匹配 404
router
router.route(route) 生成 url, 用于 history.push.
router.beforeEach(cxt, next) 路由切换中间件
- router.view
- <router.view /> 是一个路由出口组件.
- props
props.name string 路由出口子名称, 默认'default'; 在
options.routes[].name
设置.
router.link
router.link 是一个类似于 Link 的组件.
props
props.to object|string 路径或者路径对象 route.
router.beforeEach
router.beforeEach 是一个路由中间件, 你可以做一些路由切换事件; 比如授权拦截, 重定向, 等待等操作.
你应该把它定义为一个函数
router.beforeEach = function (ctx, next) {}
复制代码
ctx 这个是一个上下文对象,{route, router, history,...}
next 这是一个回调函数, 请在最后调用它; next 可以接受一个字符串路径或者对象, 这样可以重定向到别的路由.
route
route.name string 命名路由 name, 优先于 path
route.path string 路径
route.params object 路由参数对象
route.query object 查询字符串对象
route.hash string 链接 hash
最后
安利一个详细的列子: https://github.com/mengdu/ant-admin-platform
源码: https://github.com/mengdu/react-concise-router
再说下: 插件开发出来不久, 可能存在一些问题, 如果有问题, 请提 issues, 感谢你的使用. 刚从事 react 开发不久, 有什么不合理的可以在下方评论交流下.
来源: https://juejin.im/post/5b45e3a0e51d45195113120c