React路由
安装
- cnpm i react-router-dom -S
主要API
BrowserRouter或HashRouter
- BrowserRouter使用history模式;
- HashRouter使用hash模式;
- Router中包含了对路径改变的监听,并会将对于的路径传递给子组件;
Link和NavLink
- 通常路径的跳转使用Link组件,最终被渲染成a元素，to属性用于设置跳转的路径;
- NavLink是在Link基础上增加一些样式属性;
Route
- Route：用于路径的匹配;
- path属性：用于设置匹配到的路径;
- component属性：设置匹配到路径后，渲染的组件;
- exact：精准匹配;
使用
- 简单使用：修改下App.js 和 index.jsx
- 路由组件接受的props
- NavLink标签切换
- 封个NavLink玩玩
- 新建components/MyNavLink/index.jsx
- 看看props
路由的模糊匹配和严格匹配
模糊匹配
严格匹配(不轻易使用)
Redirect重定向
嵌套路由
路由三个传参方式
- 路由传参之parmas
- 路由传参之search
- 路由传参之state(此state非彼state)
路由replace模式
路由编程式导航
一般组件用上路由组件api
BrowserRouter与HashRouter
路由懒加载
- App.js
- 运行结果
可以看到爆了个错意思是显示懒加载组件时需要一个占位显示Loading指示。
- 加上Suspense显示Loading组件
- 最终第一次点击切换路由完成路由懒加载，加载结果前会先显示占位符Loading的内容。
switch (匹配到一个就不会往下匹配 排它)
route三种渲染方式
1.component(只在location匹配的时候渲染)
2.children(不管loacations是否匹配，都会渲染)
3.render(只在location匹配的时候渲染)
优先级 children > component > render 同为互斥关系
component渲染方式也可以写成回调函数
component回调函数渲染方式 与 render回调函数渲染方式区别
上图可知组件一直在重新挂载卸载，只是改变了值只想组件进行更新而不是重新卸载挂载。如果㢟比较复杂那么就没那么优雅了。正确的使用方式如下:
如果是组件就是用component如果是内联函数的话用render而不用component,因为component会导致组件的重新卸载和挂载。原理是渲染component的时候会调用React.createElement,每次创建出来的都不一样,就相当于不同的组件导致组件重新卸载挂载。而render就只是函数的直接执行调用。
动态路由
basename
所有URL的base值。如果你的应⽤程序部署在服务器的⼦⽬录，则需要将其设置为⼦⽬录。basename 的格式是前⾯有⼀个/，尾部没有/。
路由统一配置
方案一使用 npm i react-router-config
方案二 手动遍历创建
前端路由浅解析
原理
-
1.改变URL,但页面不进行强制刷新。
-
2.自己来监听URL的改变，并且改变之后显示改变后的内容。
改变URL,但页面不进行强制刷新的两个操作
-
1.通过URL的hash改变URL。
-
2.通过H5中的history模式修改URL。
URL的hash
-
本质是改变windown.location.href属性。
-
可以通过赋值location.hash来改变href,但页面不发生刷新。
H5中的history
history接口是H5新增的,他有六种模式改变URL而不刷新页面。
-
replaceState：替换原来的路径;
-
pushState：使用新的路径;
-
popState：路径的回退;
-
go：向前或向后改变路径;
-
forward：向前改变路径;
-
back：向后改变路径;
-
vscode安装插件 Live Server
