接上一条博客的内容,再次附上视频教程的学习地址
链接:https://www.bilibili.com/video/BV184411x7F9
上一篇文章链接:https://blog.csdn.net/AtalantaDavis/article/details/108342941
文章目录
第六章 react-router
概念理解
react-router
(1)react的一个插件库
(2)专门用来实现一个SPA应用
(3)基于react的项目基本都会用到此库
SPA理解
单页web应用
整个应用只有一个完整的页面
点击页面中的链接不会刷新页面,本身也不会向服务器发请求
当点击路由链接时,只会做页面的局部更新
数据都需要通过ajax请求获取,并在前端异步实现
路由的理解
- 什么是路由
- 一个路由就是一个映射关系(key:value)
- key为路由路径,value是funciton/component
router.get(path,func )
- 路由分类
- 后台路由,value是function
- 前台路由:value是component
- 后台路由
- 注册路由:router.get({path,function(req.res)})
- 当node接受请求,根据请求路径找到匹配的路由。
- 前端路由
- 注册路由:
- hash变为#about,当前路由组件就会变为About组件
前端路由的实现
history
创建方式
history=History.createBrowserHistory()
history = History.createHashHistory() // 这个会记录锚点
函数
history.push()去某个路由
history.goBack()回退
history.goForward()前进
history.replace()是指替换路由,被替换了的路由回退不了,会回退到上一个路由
react-router使用
有好几个版本
react-router-dom web端的
编写路由效果
- 编写路由组件
- 在副路由组件中指定
- 路由链接:
- 路由:
子路由
在父组件写Navlink
然后指定路由
然后使用Redirect操作首次默认路由
向路由组件传数据
通过a标签像组件传递数据。:id占位符
或者通过history的push或者replace的js来链接到组件
id在props里面可以通过console.log看
还可以通过debugger调试
路由链接和非路由链接的区别
路由链接不会发请求,只会局部刷新
非路由链接会发请求,整体刷新
react-ui库
两种UI库
其实react的库还挺多的,这个视频只介绍了两种,material-ui和ant-design,前面的是国外的一个库,后面的是蚂蚁大佬们开发维护的UI库。后来还在知乎上搜到很多别的库,老哥们可以自己去搜索一下。