React --路由

所学知识点

1. 使用swiper来了解React项目中的第三方实例化
   • 其他第三方库也是一样的道理 echarts
2. react路由 【 王者 】
   • 路由 - 》 实现单页面应用（ SPA single page application ）
   • React router 市面上版本
     • React router 3.x
     • React router 4.x [ 5.x ]
       • 不同之处： React router 3.x 是使用传统思想，统一配置路由,而4.x则不是统一配置了，它认为一切皆组件，也就是路由配置也是组件
3. 作业:
   1. vue学习总结
   2. 做一下swiper / echarts

React 路由 - 4.x [ 5 ]

1. rem解决方案

   • 淘宝解决方案： 使用淘宝封装库： flexible.js
   • 如何来监听浏览器尺寸的变化
     • window.onresize = function () {}

   /* 
     通过js来动态添加rem 
   */
   
   ;(function(designWidth, maxWidth) {
   	var doc = document,
   	win = window,
   	docEl = doc.documentElement,
   	remStyle = document.createElement("style"),
   	tid;
   
   	function refreshRem() {
   		var width = docEl.getBoundingClientRect().width;
   		maxWidth = maxWidth || 540;
   		width>maxWidth && (width=maxWidth);
   		var rem = width * 100 / designWidth;
   		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
   	}
   
   	if (docEl.firstElementChild) {
   		docEl.firstElementChild.appendChild(remStyle);
   	} else {
   		var wrap = doc.createElement("div");
   		wrap.appendChild(remStyle);
   		doc.write(wrap.innerHTML);
   		wrap = null;
   	}
   	//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
   	refreshRem();
   
   	win.addEventListener("resize", function() {
   		clearTimeout(tid); //防止执行两次
   		tid = setTimeout(refreshRem, 300);
   	}, false);
   
   	win.addEventListener("pageshow", function(e) {
   		if (e.persisted) { // 浏览器后退的时候重新计算
   			clearTimeout(tid);
   			tid = setTimeout(refreshRem, 300);
   		}
   	}, false);
   
   	if (doc.readyState === "complete") {
   		doc.body.style.fontSize = "16px";
   	} else {
   		doc.addEventListener("DOMContentLoaded", function(e) {
   			doc.body.style.fontSize = "16px";
   		}, false);
   	}
   })(375, 750); 
   
   // 备注： 这里的375本身就应该写成750 ，但是写成750之后，我们设计稿的尺寸要/50,不好算，我就想，除以100更好算，所以我改成了375
   

   • 网易方案

     function font () {
       document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px'
     }
     
     
     font()
     
     
     window.onresize = font
     

2. 1px兼容问题

3. React路由基础

   • Route 这里是路由配置组件
     • path
     • component
       • 组件
       • 函数
     • exact 路径完全匹配 / /home /home
     • render： 返回一个jsx结构
       • 组件
       • 函数
   • Switch
     • 一次只渲染一个组件
     • 可以实现类似按需加载组件的作用，可以起到一定的性能优化作用
   • Redirect 重定向组件
     • from 当前路径
     • to 目标路径
     • exact

4. React 二级路由如何实现？

   • 在你的以及路由对应的组件中写入导航和路由展示区域就行了

      <MineContainer>
         Mine
         {/* login/register导航 */}
     
         <NavLink to = "/mine/login"> 登录 </NavLink>
         <NavLink to = "/mine/register"> 注册 </NavLink>
     
     
         {/* login/register 展示区域 */}
         <Route path = "/mine/login" component = { Login } />
         <Route path = "/mine/register" component = { Register } />
     </MineContainer>
     

   • Switch的作用是可以延续到二级路由中的

5. 编程式导航

   使用js来跳转页面

   • push
   • replace

6. 常规跳转

   • go
   • goBack

7. 问题： 发现只有使用了Route的组件身上才有路由属性、

   • history
   • location
   • match
   • 具有以上属性的组件我们称之为路由组件

8. 动态路由

   ​ <Route path = “/list” component = { List }/>

   ​ <Route path = “/list/:id” component = { List }/>

   以上两个形式都可以，但是如果写了/:id之后，路径必须全跟
   

   ​ 举例： http://localhost:3000/list/001?a=1&b=2

   • 路由传参

   • 路由接参

   • 案例： 分类/列表/详情

     • 1. 配置组件库
          • ant design 蚂蚁金服团队做的组件库 https://ant.design/index-cn
          • pc端： React后台管理系统
          • 移动端： React类型项目

     • 2. 反向代理

          • src/setupProxy.js文件

            const proxy = require( 'http-proxy-middleware' )
            
            module.exports = function ( app ) {
              // app.use( proxy(标识符,options) )
              // http://m.maoyan.com/ajax/movieOnInfoList?token=
              app.use( proxy('/ajax',{
                target: 'http://m.maoyan.com',
                changeOrigin: true
              }))
            
            
              // app.use( proxy() )
            
            }
            

          • 通过第三方模块 http-proxy-middleware来进行跨域

          • 易错点： setupProxy.js文件存放目录

9. 实现长列表滚动

   • 第三方插件： better-scroll

   • better-scroll

     • 要求

       • 布局要求

         [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fAueJcWS-1570870188047)(E:\1905\3-React\react高级\react-路由\note_img\scroll-4.png)]

       • 实例化要求

   • 10. 移动端购物车实现
     11. 分类 - 列表 - 详情 - 购物车

   • 11. 路由监听

         • 1. 问题：我们想在LayOut组件中监听整个项目路由变化情况，但是LayOut组件不是路由组件

              1. 什么路由组件?
                 • 由Route组件处理的才是路由组件
              2. 分析： 如果能够将LayOut组件变成路由组件那就可以了 ？
              3. 解决： 使用 react-router-dom 提供的 高阶组件 withRouter ， 将LayOut 组件变成伪路由组件