React路由与项目实践|青训营笔记

33 阅读2分钟

路由是什么

路由是一种负责寻径的网络设备,它在互联网络中从多条路径中寻找通讯量最少的一条网络路径提供给用户通信。路由用于连接多个逻辑上分开的网络。对用户提供最佳的通信路径

路由是桥梁,帮助需求方找到供给方,并进行交换

浏览器输入一段段URL (Uniform Resource Locator)后会发生什么?

  • DNS解析(解析域名然后获取到对应的ip)获取IP首先找浏览器有没有DNS缓存——>本地host文件——>本地DNS服务器
  • 浏览器拿到ip后,在向服务器发送http请求之前,先要和服务器建立TCP连接(建立连接:三次握手,断开连接:四次挥手)
  • 发送HTTP请求(一个HTTP请求由请求行,请求报头,空行, 请求数据组成)
  • 服务器处理请求并返回结果
  • 浏览器解析并渲染页面
    页面从输入URL到渲染都发生了什么 - 掘金 (juejin.cn)

路由路程

静态网站——>动态网站——>前后端分离——>单页应用——>SSR/SSG/微前端

React-router

它可以使我们的应用可以立即呈现一些新的 UI,并发出数据请求,以使用新信息更新页面。fetch这样可以更快地获得用户体验,因为浏览器不需要请求全新的文档或重新评估下一页的 CSS 和 JavaScript 资产。它还通过动画等内容实现更动态的用户体验。客户端路由是通过创建 并链接/提交到具有 和 的页面来实现的

hashRouter和BrowserRouter的差异

hashRouter
createHashRouter v6.11.1 | React Router

它将使用 URL 的哈希部分来管理“应用程序 URL,而不是使用普通 URL,它在功能上与createBrowserRouter相同

BrowserRouter
createBrowserRouter v6.11.1 | React Router

这是所有 React Router Web 项目的推荐路由器。它使用 DOM 历史记录 API 来更新 URL 并管理历史记录堆栈。

它还支持 v6.4 数据 API,如加载程序操作提取程序