×

React-Router工作原理

提问者:Terry2023.07.16浏览:1011

介绍下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 路由重定向

<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人参与

发表评论: