介绍下React-Router工作原理。
为什么需要前端路由
早期：一个页面对应一个路由，路由跳转导致页面刷新，用户体验差
ajax的出现使得不刷新页面也可以更新页面内容，出现了SPA（单页应用）。SPA不能记住用户操作，只有一个页面对URL做映射，SEO不友好
前端路由帮助我们在仅有一个页面时记住用户进行了哪些操作
前端路由解决了什么问题
当用户刷新页面，浏览器会根据当前URL对资源进行重定向(发起请求)
单页面对服务端来说就是一套资源，怎么做到不同的URL映射不同的视图内容
拦截用户的刷新操作，避免不必要的资源请求；感知URL的变化
react-router-dom有哪些组件
HashRouter/BrowserRouter 路由器
Route 路由匹配
Link 链接，在html中是个锚点
NavLink 当前活动链接
Switch 路由跳转
Redirect 路由重定向
<Link to="/home">Home</Link> <NavLink to="/abount" activeClassName="active">About</NavLink> <Redirect to="/dashboard">Dashboard</Redirect>
React Router核心能力：跳转
路由负责定义路径和组件的映射关系
导航负责触发路由的改变
路由器根据Route定义的映射关系为新的路径匹配对应的逻辑
BrowserRouter使用的HTML5的history api实现路由跳转
HashRouter使用URL的hash属性控制路由跳转
前端通用路由解决方案
hash模式
改变URL以#分割的路径字符串，让页面感知路由变化的一种模式,通过hashchange事件触发
history模式
通过浏览器的history api实现,通过popState事件触发
网友回答文明上网理性发言 已有0人参与
发表评论: