react基础到实战-尚硅谷（学习笔记四）

接上一条博客的内容，再次附上视频教程的学习地址
链接：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请求获取，并在前端异步实现

路由的理解

1. 什么是路由
   1. 一个路由就是一个映射关系(key:value)
   2. key为路由路径，value是funciton/component

router.get(path,func )

2. 路由分类
   1. 后台路由，value是function
   2. 前台路由：value是component
3. 后台路由
   1. 注册路由：router.get({path,function(req.res)})
   2. 当node接受请求，根据请求路径找到匹配的路由。
4. 前端路由
   1. 注册路由：
   2. hash变为#about,当前路由组件就会变为About组件

前端路由的实现

history

创建方式

history=History.createBrowserHistory()
history = History.createHashHistory() // 这个会记录锚点

函数

history.push()去某个路由
history.goBack()回退
history.goForward()前进
history.replace()是指替换路由，被替换了的路由回退不了，会回退到上一个路由

react-router使用

有好几个版本

react-router-dom web端的

编写路由效果

1. 编写路由组件
2. 在副路由组件中指定
   1. 路由链接：
   2. 路由：

子路由

在父组件写Navlink
然后指定路由
然后使用Redirect操作首次默认路由

向路由组件传数据

通过a标签像组件传递数据。:id占位符

或者通过history的push或者replace的js来链接到组件

id在props里面可以通过console.log看

还可以通过debugger调试

路由链接和非路由链接的区别

路由链接不会发请求，只会局部刷新
非路由链接会发请求，整体刷新

react-ui库

两种UI库

其实react的库还挺多的，这个视频只介绍了两种，material-ui和ant-design，前面的是国外的一个库，后面的是蚂蚁大佬们开发维护的UI库。后来还在知乎上搜到很多别的库，老哥们可以自己去搜索一下。