React学习笔记(五)路由

最新推荐文章于 2023-02-24 15:17:49 发布

凉宫凉宫凉

最新推荐文章于 2023-02-24 15:17:49 发布

阅读量254

点赞数

分类专栏： React 文章标签： react.js javascript 前端前端框架

本文链接：https://blog.csdn.net/kianagrow/article/details/128277574

版权

1. 认识路由

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

在架构一个网络时，非常重要的两个设备就是路由器和交换机。
事实上，路由器主要维护的是一个映射表；
映射表会决定数据的流向；

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

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

1.1 后端路由阶段

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

服务器直接生成渲染好对应的 HTML 页面, 返回给客户端进行展示.

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

一个页面有自己对应的网址, 也就是URL；
URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个 Controller 进行处理；
Controller 进行各种处理, 最终生成 HTML 或者数据, 返回给前端.

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

当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户端.
这种情况下渲染好的页面, 不需要单独加载任何的 js 和 css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.

后端路由的缺点:

一种情况是整个页面的模块由后端人员来编写和维护的；
另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码；
而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情；

1.2 前后端分离阶段

前端渲染的理解：

每次请求涉及到的静态资源都会从静态资源服务器获取，这些资源包括 HTML+CSS+JS，然后在前端对这些请求回来的资源进行渲染；
需要注意的是，客户端的每一次请求，都会从静态资源服务器请求文件；
同时可以看到，和之前的后端路由不同，这时后端只是负责提供API了；

前后端分离阶段：

随着 Ajax 的出现, 有了前后端分离的开发模式；
后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过JavaScript 将数据渲染到页面中；
这样做最大的优点就是前后端责任的清晰，后端专注于数据上，前端专注于交互和可视化上；
并且当 移动端(iOS/Android) 出现后，后端不需要进行任何处理，依然使用之前的一套API即可；
目前比较少的网站采用这种模式开发；

单页面富应用阶段:

其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
也就是前端来维护一套路由规则

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

1.3 URL的hash

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

URL的hash

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

<div id="app">
  <a href="#/home">home</a>
  <a href="#/about">about</a>
  <div class="router-view"></div>
</div>
<script>
  // 1. 获取 router-view 元素
  const routerViewEl = document.querySelector('.router-view')
  // 2. 监听 hashchange
  window.addEventListener("hashchange",function(){
   
    switch(location.hash){
   
      case '#/home':
        routerViewEl.innerHTML = 'home';
        break;
      case '#/about':
        routerViewEl.innerHTML = 'about'
        break;
      default:
        routerViewEl.innerHTML = 'default'
    }
  })
</script>

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

1.4 HTML5 的 History

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

replaceState：替换原来的路径；
pushState：使用新的路径；
popState：路径的回退；
go：向前或向后改变路径；
forward：向前改变路径；
back：向后改变路径；

<div id="app">
  <a href="#/home">home</a>
  <a href="#/about">about</a>
  <div class="router-view"></div>
</div>
<script>
  // 1. 获取 router-view 元素
  const routerViewEl = document.querySelector(".router-view");
  // 2. 监听 所有 a 元素 的 click
  const aEls = document.getElementsByTagName("a");
  for (let aEl of aEls) {
   
    aEl.addEventListener("click", (e) => {
   
      e.preventDefault();
      const href = aEl.getAttribute("href");
      history.pushState({
   }, "", href);
      historyChange();
    });
  }
  // 3. 监听 popstate 和 go 操作
  window.addEventListener("popstate", historyChange);
  window.addEventListener("go", historyChange);
  // 4. 执行设置页面操作
  function historyChange() {
   
    switch (location.hash) {
   
      case "#/home":
        routerViewEl.innerHTML = "home";
        break;
      case "#/about":
        routerViewEl.innerHTML = "about";
        break;
      default:
        routerViewEl.innerHTML = "default";
    }
  }
</script>

2. 认识 react-router

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

Angular 的 ngRouter
React 的 ReactRouter
Vue 的 vue-router

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

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

安装React Router：

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

npm i react-router-dom

3. Router 的基本使用

3.1 开启路由功能

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

BrowserRouter 或 HashRouter

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

import ReactDOM from "react-dom/client"
import App from "./App"
// 引入 HashRouter，给 App 开启 hash 路由功能
import {
    HashRouter } from "react-router-dom"
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(
  <HashRouter>
    <App></App>
  </HashRouter>
);

3.2 路由映射配置

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

Router5.x 使用的是 Switch 组件

Route：Route 用于路径的匹配；

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

import {
    Route, Routes } from "react-router-dom";
// ... 省略部分代码
 <Routes>
   <Route path="/home" element={
   <Home />}></Route>
   <Route path="/about"