我们要的是一个简单的react-router路由
我们要的是一个简单的react-router路由
习惯了 vue-router 路由的用法,再用react-router总感觉挺麻烦的。
那么react有没有用法跟vue-router一样使用简单的路由插件呢?
管它有没有,轮子我已经造好了,请收下react-concise-router。
react-concise-router
react-concise-router
是一个基于 react-router v4.x 封装的一个路由插件。
有了这个插件,你可以不用再去学 react-router v4.x
那些文档了,直接用这个插件,就可以实现你需要的路由。
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
最后
安利一个详细的列子:ant-admin-platform
源码:react-concise-router
再说下:插件开发出来不久,可能存在一些问题,如果有问题,请提issues,感谢你的使用。 刚从事react开发不久,有什么不合理的可以在下方评论交流下。
转载于:https://juejin.im/post/5b45e3a0e51d45195113120c
我们要的是一个简单的react-router路由相关推荐
- React Router路由详解
React Router路由详解 一.基础 1.安装使用 2.React Router 中通用的组件 路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...
- react更改路由入参_JavaScript基础教程 react router路由传参
本篇教程介绍了JavaScript基础教程 react router路由传参,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < 今天,我们要讨论的是react ...
- 搭建一个简单的react工程
首先,需要确保安装了 Node.js 和 npm.可以在命令行中输入 node -v 和 npm -v 命令来检查版本. 创建一个新的项目目录,并进入该目录. 在命令行中运行以下命令来初始化 npm ...
- react router 路由守卫_react实现hash路由
众所周知,目前单页面使用的路由有两种实现方式: hash 模式 history 模式 hash 模式 路由原理: 我们先来看hash模式,页面首次加载时需要在load事件中解析初始的URL,从而展示进 ...
- 使用React和Spring Boot构建一个简单的CRUD应用
"我喜欢编写身份验证和授权代码." 〜从来没有Java开发人员. 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权和多因素身份验证. Reac ...
- React.js 小书 Lesson1-2 - 前端组件化(一):从一个简单的例子讲起
React.js 小书 Lesson1-2 - 前端组件化(一):从一个简单的例子讲起 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson2 ...
- 使用React实现一个简单计算器
使用React实现一个简单的计算器代码 实现效果: index.html <!DOCTYPE html> <html lang="en"><head& ...
- 一个webpack,react,less,es6的DEMO
1.package.json如下 {"name": "demo","version": "1.0.0","de ...
- 一个简单粗暴的前后端分离方案
项目背景 刚刚参加完一个项目,背景:后端是用java,后端服务已经开发的差不多了,现在要通过web的方式对外提供服务,也就是B/S架构.后端专注做业务逻辑,不想在后端做页面渲染的事情,只向前端提供数据 ...
最新文章
- TensorFlow练习24: GANs-生成对抗网络 (生成明星脸)
- openstack安装系列问题:window7 64位安装的virtualBox 只能选择32位的系统安装不能选择64位的系统安装...
- 在SAP BW中使用ABAP
- ASP存储过程参数数据类型
- [html] 什么是空元素?常用的空元素有哪些?
- 宝可梦世界无限极可以玩服务器吗,口袋妖怪世界无极限运行库
- JavaScript高级知识点整理
- 关于清除丢失贴图与IES文件
- PHP 报错 Resource temporarily unavailable 无法删除上传的资源
- A-Z,所有汽车品牌完整json格式
- Filecoin(FIL) 交易离线签名
- IP问问区县级别IP地址库---使用帮助(上篇)
- 【腾讯敏捷转型NO.1】敏捷是什么鬼?
- STM32HAL库-内部Flash在指定页读写保护示例
- 我的Crystal xcelsius之旅
- python数据分析入门【二】 --- 数据处理
- 无显卡本地运行katago围棋程序
- TypeScript及TypeScript在vue3.0项目中的基本使用
- 程序员每天加班到晚上12点,早上迟到几分钟被领导批:价值观不符
- vue使用addRoutes()方法后,this.$router.options.routes未更新
热门文章
- 面试官:抛开Spring来说,如何自己实现Spring AOP?
- 记一次Quartz重复调度(任务重复执行)的问题排查
- “12306” 是如何支撑百万 QPS 的?
- 如何给女朋友解释为什么Java里面的String对象是不可变的?
- 拒绝接口裸奔!开放API接口签名验证!
- 五分钟体验SpringBoot+Skywalking
- 今天我们来聊一聊 Spring 中的线程安全性
- JDK 13 新特性一览
- 腾讯视频招GNN方向实习生啦~
- 登顶CLUE榜单,腾讯云小微与腾讯AI Lab联合团队提出基于知识的中文预训练模型...