搜索 登录注册
×

热门关键词：Web前端|前端开发|HTML5|CSS3|jQuery|CSS3动画

React-Router工作原理

提问者：Terry2023.07.16浏览：3428
React 问答

介绍下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人参与

发表评论:

相关问答