React-router 全面总结和整理

一、SPA的理解

• 单页Web应用（Single page web application，SPA）；
• 整个应用只有一个完整的页面；
• 点击页面中的链接（React路由技术）不会刷新页面，只会做页面的多局部更新；
• 数据都需要通过ajax请求获取，并在前端异步展现；
• 总结：单页面多组件；

二、路由基本概念

1. 什么是路由？
   • 一个路由就是一个映射关系(key:value)
   • key为路径，value可能是function或者component
2. 路由分类
   • 后端路由：
     • value是function，用来处理客户端提交的请求
     • 注册路由：router.get(path, function(req,res))1)
     • 工作过程：当node接收到一个请求时，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据
   • 前端路由：
     • 浏览器端路由，value是component，用于展示页面内容
     • 注册路由:
     • 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

三、路由的基本使用

/*
1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签
     Demo
3.展示区写Route标签进行路径的匹配
 	 
4.一个页面只能有一个Router管理，且要明确指出是web端还是native端
	index.js的最外侧包裹了一个
*/

四、路由组件与一般组件的区别

1. 写法不同

   • 一般组件：
   • 路由组件：

2. 存放位置不同：

   • 一般组件：components
   • 路由组件：pages

3. 接收到的props不同

   • 一般组件：标签传递什么，接收到什么

   • 路由组件：接收到三个固定的属性

     ​ history : go(n) 、goBack( ) 、goForward( ) 、push(path, state)、replace(path, state)

     ​ location : pathname:"/about"、search:""、state:undefined

     ​ match :params: { }、path : “/about”、url : “/about”

五、NavLink的使用

点击导航栏，产生高亮

//activeClassName可以决定高亮的样式
//实质就是给点击的标签加上active属性
...

六、switch的使用

//当明确使用一个路由对应一个组件时，可以用Switch标签包裹一下
//switch可以提高路由的匹配效率

  
  

七、解决多级路径刷新后的样式丢失问题

//当使用多级路径时，刷新后，样式会丢失
//原因：向服务器请求数据时，会带上多级路径，从而造成路径错误，请求失败
//解决方法：
/*
1. public/index.html中引入样式时不写./ 写/
2. public/index.html中引入样式时不写./ 写%PUBLIC_URL%
3. 使用HashRouter （不太常用）
*/

八、路由的精准和模糊匹配

//1.默认使用的是模糊匹配
//2.开启严格匹配：
  
//3.严格匹配不要随便开启，需要时再开。有时候开启会导致无法继续匹配二级路由

九、Redirect的使用

//1.一般写在所有路由注册的最下方，当所有的路由都无法匹配时，跳转到Redirect指定的路由
//2.具体实现如下：

  
  
  

十、二级路由/嵌套路由

1. 注册子路由时，要写上父路由的path值；
2. 路由的匹配是按照注册路由的顺序进行的；
3. 不要随意开启路由严格模式，会导致二级路由无法匹配；

十一、路由的参数传递

1. params参数
   路由链接（携带参数）：< Link to=’/demo/test/tom/18’>详情
   注册路由（声明接收）：
   接收参数：this.props.match.params

2. search参数
   路由链接（携带参数）：详情
   注册路由（无需声明，正常注册即可）：
   接收参数：this.props.location.search
   备注：获取到的search是urlencoded编码字符串，需要借助querystring（库）解析

   import qs from 'querystring';
   
   qs.parse(xxxx)   //将urlencoded编码转化成对象形式
   qs.stringify(xxxx)   //将对象形式转化为urlencoded编码
   

3. state参数
   路由链接（携带参数）：详情

   注册路由（无需声明，正常注册即可）：
   接收参数：this.props.location.state
   备注：刷新也可以保留住参数

十二、push和replace

1. push和replace都是history中的；

2. push是不断压栈；replace是替换；

3. 默认是push模式，可以通过如下更改:

   About
   

十三、编程式路由导航

只要是路由组件，都会有history对象，通过this.props.history里的go(n) 、goBack( ) 、goForward( ) 、push(path, state)、replace(path, state)方法实现路由跳转。

十四、withRouter的使用

1. withRouter可以加工一般组件，让一般组件具有路由组件所特有的API

2. withRouter的返回值是一个新组件

   import withRouter from 'react-router-dom'
   
   class Header extends React.Component{
     xxxx
   }
   
   export default withRouter(Header)
   //一般组件Header被withRouter改造成路由组件，具有history对象
   

十五、BrowserRouter与HashRouter的区别

1. 底层原理不一样：
   BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。
2. Path表现形式不一样：
   BrowserRouter的路径中没有#，例如：localhost：3000/demo/testHashRouter的路径包含#，例如：localhost：3008/#/demo/test
3. 刷新后对路由state参数的影响：
   • BrowserRouter没有任何影响，因为state保存在history对象中
   • HashRouter刷新后会导致路由state参数的丢失。
4. 备注：HashRouter可以用于解决一些路径错误相关的问题（样式丢失问题）