【REACT-router】

一、介绍

路由是根据不同的url地址展示不同的页面或者内容

安装：

导入：

 

二、定义路由

JSX：

 

建议：将路由单独封装在一个js文件中

注意一级路由与多级路由

三、重定向

如果我们不想让用户访问某个路由或者该路由不在我们书写的路由中，我们可以让组件跳转到我们指定的路由

 

四、嵌套路由

 

五、路由跳转

六、路由传参

  

动态路由：代表动态，id可以被替换，在props.match.params中获取

七、路由拦截

八、路由模式

HashRouter

BrowserRouter

九、withRouter

先看一下问题：

不是通过component渲染的子组件拿不到history属性

 

如果：父组件也没有history怎么处理？

解决上述问题：

在需要使用history的子组件中，提前引入withRouter（原理：高阶组件） 

十、反向代理

解决跨域问题

参考链接：

 

十二、css module

spa应用，在任意js或者css代码都相当于在head标签中引入，如果是多组件或者多人开发如何避免冲突 ，建议每一个组件都可以放入一个同名文件夹中，这样js与css在一起。css命名的时候写成：A.moudle.css.这样这个css样式只对A起作用，注意不要单独写标签名选择器