React-Router工作原理

介绍下react-Router工作原理。

为什么需要前端路由

1. 早期：一个页面对应一个路由，路由跳转导致页面刷新，用户体验差

2. Ajax的出现使得不刷新页面也可以更新页面内容，出现了SPA（单页应用）。SPA不能记住用户操作，只有一个页面对url做映射，SEO不友好

3. 前端路由帮助我们在仅有一个页面时记住用户进行了哪些操作

前端路由解决了什么问题

1. 当用户刷新页面，浏览器会根据当前URL对资源进行重定向(发起请求)

2. 单页面对服务端来说就是一套资源，怎么做到不同的URL映射不同的视图内容

3. 拦截用户的刷新操作，避免不必要的资源请求；感知URL的变化

react-router-dom有哪些组件

Hashrouter/Browserrouter 路由器

Route 路由匹配

link 链接，在html中是个锚点

NavLink 当前活动链接

switch 路由跳转

Redirect 路由重定向

React Router核心能力：跳转

路由负责定义路径和组件的映射关系

导航负责触发路由的改变
路由器根据Route定义的映射关系为新的路径匹配对应的逻辑

BrowserRouter使用的html5的history API实现路由跳转
HashRouter使用URL的hash属性控制路由跳转

前端通用路由解决方案

• hash模式

改变URL以#分割的路径字符串，让页面感知路由变化的一种模式,通过hashchange事件触发

• history模式

通过浏览器的history api实现,通过popState事件触发