wangry

Appearance

前端路由 ​

为什么需要？ ​

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

ajax 的出现可以不刷新页面也可以更新页面内容，出现了 SPA（单页应用）。SPA 不能记录用户操作，只有一个页面对 URL 做映射，SEO 不友好

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

解决了什么问题？ ​

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

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

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

react-router-dom 的组件 ​

  • HashRouter/BrowserRouter 路由器

  • BrowserRouter 使用的 HTML5 的 history api 实现路由跳转

  • HashRouter 使用 URL 的 hash 属性控制路由跳转

  • Route 路由匹配

  • Link 链接，在 html 中是个锚点

  • NavLink 当前活动链接

  • Switch 路由跳转

  • Redirect 路由重定向

React Router 核心能力：跳转

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

导航负责触发路由的改变

路由器根据 Route 定义的映射关系为新的路径匹配对应的逻辑

前端通用路由解决方案 ​

  • hash 模式

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

  • history 模式

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

参考 ​

https://juejin.cn/post/7182382408807743548?searchId=20240906182155ED73E066E10924BC2D23#heading-8