关于router的那点事

掘金菜鸡
780 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

概念

什么是路由

路由的概念在多个领域中都有其概念和应用，而在前端的路由概念中，主要是指通过不同的页面地址展示不同的组件，并且能够实现无刷新跳转。

路由的几个角色

image.png

react-router目前最新的是v6版本，不同于v5，其内部大量使用hook去实现。

在路由内部主要依赖以下几个库：

  • react-router：核心库，包含诸多和路由功能相关的代码
  • react-router-dom：结合路由和页面实现相关功能
  • history：解析地址
npm install react-router-dom@6

路由模式

image.png

hash

hash路由主要是通过url地址中的哈希值来确定显示的组件，hash的变化，不会导致页面刷新 这种模式的优点是兼容性最好，而hash主要是指地址栏#后面的一连串数值，所以在视觉上也会觉得url不符合规范。

image.png

image.png

history

在HTML5新增了History API，History让浏览器拥有改变路径而不刷新页面的方法。新开地址页面称为push、浏览器前进后退叫做pop。这种操作对应着其内部实现的栈模型。history表示浏览器的历史记录，内部使用栈的方式存储这些记录数据。

History_API 使用文档

image.png

History API提供了相应的接口以及事件监听，让我们有了根据页面的路径决定渲染哪个组件的能力。 该API主要的参数如下：

  • history.length：获取栈中数据量
  • history.pushState：向当前历史记录栈中加入一条新的记录
    • 参数1：附加的数据，自定义的数据，可以是任何类型
    • 参数2：页面标题，目前大部分浏览器不支持
    • 参数3：新的地址
  • history.replaceState：将当前指针指向的历史记录，替换为某个记录
    • 参数1：附加的数据，自定义的数据，可以是任何类型
    • 参数2：页面标题，目前大部分浏览器不支持
    • 参数3：新的地址

react-router相关组件

Route

Route本身不做任何展示，仅仅提供路由模式的配，同时该组件会产生一个上下文context，该上下文中会提供一些实用的对象和方法，供其他相关组件使用。

  • HashRouter：该组件，使用hash模式匹配
  • BrowserRouter：该组件，使用BrowserHistory模式匹配

通常情况下，Router组件只有一个同时该组件会包裹整个应用的页面。

Router

Router会根据不同的地址，展示不同的组件 以下为其几个重要的属性：

  • path：匹配的路径

    • 默认情况下，不区分大小写，可以设置sensitive属性为true，来区分大小写
    • 默认情况下，只匹配初始目录，如果要精确匹配，配置exact属性为true
    • 如果不写path，则会匹配任意路径

  • component：匹配成功后要显示的组件

  • children：

    • 传递React元素，无论是否匹配，一定会显示children，并且会忽略component属性
    • 传递一个函数，该函数有多个参数，这些参数来自于上下文，该函数返回react元素，则一定会显示返回的元素，并且忽略component属性

Route组件可以写到任意的地方，只要保证它是Router组件的后代元素。

Switch

Switch组件中的Route组件，当匹配到第一个Route后，会立即停止匹配。

注意点： 由于Switch组件会循环所有子元素，然后让每个子元素去完成匹配，若匹配到，则渲染对应的组件，然后停止循环。因此，不能在Switch的子元素中使用除Route外的其他组件。

WithRouter

WithRouter是一个高阶组件，该高阶组件通过包裹一个组件会返回一个新组件，新组件将向提供的组件注入路由信息。

Link

Link组件能够生成一个无刷新跳转的a标签。 参数：

  • to
    • 字符串：跳转的目标地址
    • 对象：
      • pathname：url路径
      • search：地址栏的search值
      • hash：地址栏的hash值
      • state：附加的状态信息
  • replace：布尔值，表示是否是替换当前地址，默认是false
  • innerRef：可以将内部的a元素的ref附着在传递的对象或函数参数上
    • 函数
    • ref对象

NavLink

NavLink是一种特殊的Link，Link组件具备的功能都有，并且其具备额外功能：根据当前地址和链接地址，来决定该链接的样式。 参数：

  • activeClassName: 匹配时使用的类名
  • activeStyle: 匹配时使用的内联样式
  • exact: 是否精确匹配
  • sensitive：匹配时是否区分大小写
  • strict：是否严格匹配最后一个斜杠

Redirect

Redirect为重定向组件，当加载到该组件时，会自动跳转并且无刷新到另外一个地址。 参数：

  • to：跳转的地址。
    • 字符串
    • 对象
  • push: 默认为false，表示跳转使用替换的方式，设置为true后，则使用push的方式跳转。
  • from：当匹配到from地址规则时才进行跳转。
  • exact: 是否精确匹配from。
  • sensitive：from匹配时是否区分大小写。
  • strict：from是否严格匹配最后一个斜杠。

小结

本篇章我们主要介绍前端路由的基本概念以及react-router常见组件以及基本参数和用法。 基于浏览器的实现，我们只需要记住内部两种模式的基本实现原理。

avatar
文章
阅读
粉丝