React-Router路由详解

• 认识React-Router
• Router的基本使用
• Router的路由嵌套
• Router的代码跳转
• Router的参数传递
• Router的配置方式

认识前端路由

路由其实是网络工程中的一个术语：

• 在时，非常重要的两个设备就是
• 当然，目前在我们生活中也是越来越被大家所熟知，因为我们生活中都会用到
• 事实上，路由器主要维护的是一个
• 会决定数据的流向

路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：

• 后端路由阶段
• 前后端分离阶段
• 单页面富应用（SPA）

后端路由阶段

早期的网站开发整个HTML页面是由服务器来渲染的

• 服务器直接，返回给客户端进行展示

但是，一个网站，这么多页面服务器如何处理呢？

• 一个页面有，也就是；
• URL会发送到服务器，服务器会通过，并且最后交给。
• Controller进行各种处理，最终生成，返回给前端

上面的这种操作，就是后端路由

• 当我们页面中需要时，交给服务器来进行处理，服务器渲染好，并且将
• 这种情况下渲染好的页面，可以直接，这样也

后端路由的缺点

• 一种情况是的
• 另一种情况是
• 而且通常情况下，编写和维护都是非常糟糕的事情

前后端分离阶段

前端渲染的理解：

• 每次请求涉及到的静态资源都会从静态资源服务器获取，这些资源包括HTML+CSS+JS，然后；
• 需要注意的是，客户端的每一次请求，都会
• 同时可以看到，和之前的后端路由不同，这时后端只是了

前后端分离阶段

• 随着Ajax的出现，有了
• 后端只提供API来返回数据，前端，并且可以中
• 这样做的最大的优点就是上
• 并且出现后，后端不需要进行任何处理，依然使用之前的一套API即可
• 目前比较少的网站采用这种模式开发

单页面富应用阶段

• 其实SPA最主要的特点就是上加了一层
• 也就是前端来维护一套

前端路由的核心是什么呢？改变URL，但是页面不进行整体的刷新

URL的hash

前端路由是如何做到URL和内容进行映射呢？监听URL的改变。

URL的hash

• URL的hash也就是锚点(#)，本质是改变window.location的href属性
• 我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新

hash的优势就是兼容性好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径。

HTML5的History

history接口是HTML5新增的，它有六种模式改变URL而不刷新页面

• ：替换原来的路径
• ：使用新的路径
• ：路径的回退
• ：向前或向后改变路径
• ：向前改变路径
• ：向后改变路径

认识react-router

目前前端流行的三大框架，都有自己的路由实现

• 的
• 的
• 的

React Router在最近两年版本更新的较快，并且在最新的React Router6.x版本中发生了较大的变化。

• 目前React Router6.x已经非常稳定，我们可以放心的使用

安装React Router

• 安装时，我们选择react-router-dom
• react-router会包含一些react-native的内容，web开发并不需要

Router的基本使用

react-router最主要的API是给我们提供的一些组件

BrowserRouter或HashRouter

• Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件
• 使用history模式
• 使用hash模式

路由映射配置

Routes：包裹所有的Route，在其中匹配一个路由

• Router5.x使用的是Switch组件

Route：Route用于路径的匹配

• 属性：用于设置匹配到的路径
• 属性：设置匹配到路径后，渲染的组件
  • Router5.x使用的是component属性
• exact：精准匹配，只有精准匹配到完全一致的路径，才会渲染对应的组件
  • Router6.x不再支持该属性

路由配置和跳转

Link和NavLink：

• 通常路径的跳转是使用Link组件，最终会被渲染成a元素
• NavLink是在Link基础之上增加了一些样式属性（后续学习）
• to属性：Link中最重要的属性，用于设置跳转到的路径

NavLink的使用

需求：路径选中时，对应的a元素变为红色

这个时候，我们要使用NavLink组件来替代Link组件

• ：传入函数，函数接受一个对象，包含isActive属性
• ：传入函数，函数接受一个对象，包含isActive属性

默认的activeClassName

• 事实上在默认匹配成功时，NavLink就会添加上一个动态的 class
• 所以我们也可以直接编写样式

当然，如果你担心这个class在其他地方被使用了，出现样式的层叠，也可以自定义class

Navigate导航

****用于路由的重定向，当这个组件出现时，就会执行跳转到对应的to路径中

我们这里使用这个的一个案例

• 用户跳转到Profile界面
• 但是在Profile界面有一个isLogin用于记录用户是否登录
  • true：那么显示用户的名称
  • false：直接重定向到登录界面

我们也可以在匹配到/的时候，直接跳转到/home页面

Not Found页面配置

如果用户随意输入一个地址，该地址无法匹配，那么在路由匹配的位置将什么内容都不显示

很多时候，我们希望在这种情况下，让用户看到一个Not Found的页面

这个过程非常简单

• 开发一个页面
• 配置对应的Route，并且设置即可

路由的嵌套

在开发中，路由之间是存在嵌套关系的

这里我们假设Home页面中有两个页面内容

• 推荐列表和排行榜列表
• 点击不同的链接可以跳转到不同的地方，显示不同的内容

<Outlet>组件用于在父路由元素中作为子路由的占位元素

手动路由的跳转

目前我们实现的跳转主要是通过Link或者NavLink进行跳转的，实际上我们也可以通过****进行跳转。

• 我们知道Navigate组件是可以进行路由的跳转的，但是依然是组件的方式
• 如果我们希望通过逻辑进行跳转（比如点击了一个button），那么

在Router6.x版本之后，代码类的API都迁移到了hooks的写法

• 如果我们希望进行代码跳转，需要通过的Hook获取到进行操作
• 那么如果是一个组件，我们可以直接调用，但是？

路由参数传递

传递函数有二种方式：

• 动态路由的方式
• search传递参数

动态路由的概念指的是路由中的路径并不会固定

• 比如/detail的path对应一个组件Detail
• 如果我们将path在Route匹配时写成/detail/:id，那么 /detail/abc、/detail/123都可以匹配到该Route，并且进行显示
• 这个匹配规则，我们就称之为
• 通常情况下，使用动态路由可以为路由传递参数

search传递参数

路由的配置文件

目前我们所有的路由定义都是直接使用Route组件，并且添加属性来完成的

但是这样的方式会让路由变得非常混乱，我们希望将所有的路由配置放到一个地方进行集中管理

• 在早期的时候，Router并没有提供相关API，我们需要借助react-router-config完成
• 在Router6.x中，为我们提供了 API可以完成相关的配置

如果我们对某些组件进行了异步加载（懒加载），那么需要使用Suspense进行包裹