共计 985 个字符,预计需要花费 3 分钟才能阅读完成。
晚期是凭借多个页面借助 a 标签实现路由的跳转,也就是多页面编程,n 个导航对应 n 个 html.
所以 spa 应运而生。单页面多组件
路由的工作原理【一种映射关系 门路 – 组件】
- 一开始的地址是没有参数的
- 点击路由连贯后,页面并不会产生跳转。并且路由会批改浏览器的地址
路由中检测浏览器的门路 (参数) 变动(这里是会疏忽后面的 ip 以及 port)匹配组件参数,展现相应的组件
路由监测的实现:得益于 history 对象 浏览器历史记录咱们个别不会间接去操作这个 window.history 去操作浏览器的门路 历史记录的批改以及替换 因为原生的 api 不好用 so
借助一个库 history.js 这个创立的 history 对象实质也是操作了 bom 的 history
history.push/forward/go/back/replace
history: HASH(# 兼容性好) browser
react-router 库其实有三种实现 实用于三种平台 web(dom) native(原生)anywhere(api 过多)
router: 路由器 治理路由
route:路由(接口 天线)
- LINK ROUTE 组件须要包裹在路由器 Router 内 BrowseRouter 或 HashRouter 必须被路由器所治理 而且只能是一个 多个路由器之间是独立的
- link 中的 to 的属性值最好是小写的 因为不辨别大小写
- 路由链接 link 实质是 a 标签 作用就是点击后批改地址栏门路 浏览器的历史记录就会工作 当门路变动就会匹配组件
1)tnpm i react-router-dom
原生写 react
- 简单须要多个 html 引入各种 react 文件 编码慢
- 通过 js 批改为 jsx 的模式依附浏览器 babel 翻译 代码过多浏览器忙不过来
应用 cli 简略疾速搭建 react 利用 cli 是 webpeck 搭建的,他有好多 loader plugins 由很多性能‘ - 装置脚手架 create-react-app 库帮忙你装置 cli
- 创立我的项目 create-react-app 我的项目名
- 启动 npm start
webpeck 官网把对于 react 的配置文件暗藏了 执行 eject 会裸露处所有的配置文件并且回不去了
cli:
网络申请。react 中不倡议应用 jquery 因为他重视的是操作原生 dom 而 react 是不关注视图层的
axios: Q 轻量 可运行在服务端 反对 promise 实质就是 xmlHttpRequest 对象的封装
全局装置后援用报错
正文完
发表至: react-router4
2021-12-03