react笔记

1.switch的作用：

注册路由的时候用switch包裹，多个组件配置了相同路由路径的时候只会展示第一个，否则都会展示。

2.解决样式丢失问题 

原因和场景：注册路由嵌套了层级，页面刷新之后样式丢失了。是因为请求的bootStrap样式默认会请求本地启动的服务器public根目录，修改了路由路径之后，样式的路径也变化，找不到对应的路径时，会默认返回index.html,就会出现样式丢失。

解决办法：

（1）去掉路径"."

(2)加%PUBLIC_URL%

 (3)使用hash 路由

3.路由的模糊匹配与严格匹配

1).模糊匹配：

2).开启严格匹配： 

 使用：一般情况下不建议开严格模式，除非出现诡异的路由问题，多个页面跳一个页面这种，否则会出现问题。

4.redirect的使用：

都匹配不上的时候显示重定向：redict指定的路由

路由首次打开默认展示/home.需要用到重定向

 

5.多级路由（嵌套路由）

注意事项：

1）、注册子路由时要写上父路由的path值

2）、路由的匹配是按照注册路由的顺序进行的

6、 向路由组件传递params参数

    场景：注册的路由链接点击后需要向路由组件中传递params参数

 ajax穿参数的几种方式：

 

方式1：params传参数

（在路由链接中加要携带的value属性值，注册路由中通过：id/:title的方式，就能把路由链接中的参数按照对应的位置命名为：后的属性

  在跳转的组件中打印props，默认在match中就会有这几个属性值命名的参数。

 

 

方法2：search参数传参

 

 

控制台直接打印props:

 上图中的search是一个urlencode编码格式。需要转化为键值对的对象。可以借助一个库，这个库是react自带的，不需要安装下载。可以直接使用

 如果需要字符串转为键值对，则用qs.parse("xxxxxxxxx")方法

方法3：传递state参数

传递的时候就增加了一个对象。

 总结：

七、路由模式：push与replace 

开启replace模式，不会留下记录，返回时不会返回之前记录的页面

 

八、编程式路由导航

场景： 比如进入页面3秒之后跳转到其他页面，就需要用到编程式路由导航

借助路由上的history

 

页面的前进后退 

 

九、withRouter的使用

 history只能在路由组件有，一般组件中没有，如果一般组件需要实现history的后退，前进等功能，需要使用withRouter。

导入withRouter函数

导出一个withRouter函数实例，解决一般组件使用路由的问题 ，可以加工一般组件，让一般组件具有路由组件特有的属性。withRouter的返回值是一个新组件。具有路由组件的api

 

十、browserRouter和hashRouter的区别

比如样式丢失可以使用hashRouter解决

十、react中antd的基本使用 

自定义主题