React Router

2023-10-05 21:55:22

React Router

前端路由的原理

前端路由是如何做到URL和内容进行映射呢？监听URL的改变。
URL发生变化，同时不引起页面的刷新有两个办法：
- 通过URL的hash改变URL；
- 通过HTML5中的history模式修改URL；
当监听到URL发生变化时，我们可以通过自己判断当前的URL，决定到底渲染什么样的内容。

URL的hash

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

<div id="app">
  <a href="#/home">首页</a>
  <a href="#/about">关于</a>
  <div class="router-view"></div>
</div>
  
<script>
  // 获取router-view的DOM
  const routerViewEl = document.getElementsByClassName("router-view")[0];
  // 监听URL的改变
  window.addEventListener("hashchange", () => {
    switch (location.hash) {
      case "#/home":
        routerViewEl.innerHTML = "首页";
        break;
      case "#/about":
        routerViewEl.innerHTML = "关于";
        break;
      default:
        routerViewEl.innerHTML = "";
    }
  })
</script>

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

HTML5的history

history接口是HTML5新增的, 它有l六种模式改变URL而不刷新页面：
- replaceState：替换原来的路径；
- pushState：使用新的路径；
- popState：路径的回退；
- go：向前或向后改变路径；
- forward：向前改变路径；
- back：向后改变路径；

<div id="app">
  <a href="/home">首页</a>
  <a href="/about">关于</a>
  <div class="router-view"></div>
</div>
<script>
  // 1.获取router-view的DOM
  const routerViewEl = document.getElementsByClassName("router-view")[0];
  // 获取所有的a元素, 自己来监听a元素的改变
  const aEls = document.getElementsByTagName("a");
  for (let el of aEls) {
    el.addEventListener("click", e => {
      e.preventDefault();
      const href = el.getAttribute("href");
      history.pushState({}, "", href);
      urlChange();
    })
  }
  // 执行返回操作时, 依然来到urlChange
  window.addEventListener('popstate',urlChange);
  // 监听URL的改变
  function urlChange() {
    switch (location.pathname) {
      case "/home":
        routerViewEl.innerHTML = "首页";
        break;
      case "/about":
        routerViewEl.innerHTML = "关于";
        break;
      default:
        routerViewEl.innerHTML = "";
    }
  }
</script>

react-router

React Router的版本4开始，路由不再集中在一个包中进行管理了：
- react-router是router的核心部分代码；
- react-router-dom是用于浏览器的；
- react-router-native是用于原生应用的；
目前我们使用最新的React Router版本是v5的版本：
- 实际上v4的版本和v5的版本差异并不大；
安装react-router：
- 安装react-router-dom会自动帮助我们安装react-router的依赖；
- yarn add react-router-dom

Router的基本使用

react-router最主要的API是给我们提供的一些组件：
- BrowserRouter或HashRouter
  - Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件；
  - BrowserRouter使用history模式；
  - HashRouter使用hash模式；
- Link和NavLink：
  - 通常路径的跳转是使用Link组件，最终会被渲染成a元素；
  - NavLink是在Link基础之上增加了一些样式属性（后续学习）；
  - to属性：Link中最重要的属性，用于设置跳转到的路径；
- Route：
  - Route用于路径的匹配；
  - path属性：用于设置匹配到的路径；
  - component属性：设置匹配到路径后，渲染的组件；
  - exact：精准匹配，只有精准匹配到完全一致的路径，才会渲染对应的组件；

渲染逻辑：

Route相当于占位，匹配到了就渲染出来。

NavLink的使用

需求：路径选中时，对应的a元素变为红色
这个时候，我们要使用NavLink组件来替代Link组件：
- activeStyle：活跃时（匹配时）的样式；
- activeClassName：活跃时添加的class；
- exact：是否精准匹配；
但是，我们会发现在选中about或profile时，第一个也会变成红色：
- 原因是/路径也匹配到了/about或/profile；
- 这个时候，我们可以在第一个NavLink中添加上exact属性；
默认的activeClassName：
- 事实上在默认匹配成功时，NavLink就会添加上一个动态的active class；
- 所以我们也可以直接编写样式
当然，如果你担心这个class在其他地方被使用了，出现样式的层叠，也可以自定义class

样式：

a {
  margin: 0 10px;
}

a.active, a.link-active {
  color: red;
  font-size: 30px;
}

a.about-active {
  color: orange;
  font-size: 20px;
}

Switch的作用

我们来看下面的路由规则：
- 当我们匹配到某一个路径时，我们会发现有一些问题；
- 比如/about路径匹配到的同时，/:userid也被匹配到了，并且最后的一个NoMatch组件总是被匹配到；

原因是什么呢？默认情况下，react-router中只要是路径被匹配到的Route对应的组件都会被渲染；
但是实际开发中，我们往往希望有一种排他的思想：
只要匹配到了第一个，那么后面的就不应该继续匹配了；
这个时候我们可以使用Switch来将所有的Route进行包裹即可；

Redirect

Redirect用于路由的重定向，当这个组件出现时，就会执行跳转到对应的to路径中：
我们这里使用这个的一个案例：
- 用户跳转到User界面；
- 但是在User界面有一个isLogin用于记录用户是否登录：
  - true：那么显示用户的名称；
  - false：直接重定向到登录界面；

路由的嵌套

在开发中，路由之间是存在嵌套关系的。
这里我们假设about页面中有两个页面内容：
- 商品列表和消息列表；
- 点击不同的链接可以跳转到不同的地方，显示不同的内容；

手动路由跳转

目前我们实现的跳转主要是通过Link或者NavLink进行跳转的，实际上我们也可以通过JavaScript代码进行跳转。
但是通过JavaScript代码进行跳转有一个前提：必须获取到history对象。
如何可以获取到history的对象呢？两种方式
- 方式一：如果该组件是通过路由直接跳转过来的，那么可以直接获取history、location、match对象；
- 方式二：如果该组件是一个普通渲染的组件，那么不可以直接获取history、location、match对象；
那么如果普通的组件也希望获取对应的对象属性应该怎么做呢？
- 前面我们学习过高阶组件，可以在组件中添加想要的属性；
- react-router也是通过高阶组件为我们的组件添加相关的属性的；
如果我们希望在App组件中获取到history对象，必须满足一下两个条件：
- App组件必须包裹在Router组件之内；
- App组件使用withRouter高阶组件包裹；

不是交给Router渲染出来的组件，需要使用withRouter增加相关属性。

参数传递

传递参数有三种方式：
- 动态路由的方式；
- search传递参数；
- Link中to传入对象；
动态路由的概念指的是路由中的路径并不会固定：
- 比如/detail的path对应一个组件Detail；
- 如果我们将path在Route匹配时写成/detail/:id，那么 /detail/abc、/detail/123都可以匹配到该Route，并且进行显示；
- 这个匹配规则，我们就称之为动态路由；
- 通常情况下，使用动态路由可以为路由传递参数。

search传递参数

Link中to可以直接传入一个对象

动态路由

使用示例：

组件获取传入的参数值：

search传递参数

使用

组件调用：

Link中to传入对象

调用：

react-router-config

目前我们所有的路由定义都是直接使用Route组件，并且添加属性来完成的。
但是这样的方式会让路由变得非常混乱，我们希望将所有的路由配置放到一个地方进行集中管理：
- 这个时候可以使用react-router-config来完成；
安装react-router-config
- yarn add react-router-config
配置路由映射的关系数组

import Home from '../pages/home';
import About, { AboutHisotry, AboutCulture, AboutContact, AboutJoin } from '../pages/about';
import Profile from '../pages/profile';
import User from '../pages/user';

const routes = [
  {
    path: "/",
    exact: true,
    component: Home
  },
  {
    path: "/about",
    component: About,
    routes: [
      {
        path: "/about",
        exact: true,
        component: AboutHisotry
      },
      {
        path: "/about/culture",
        component: AboutCulture
      },
      {
        path: "/about/contact",
        component: AboutContact
      },
      {
        path: "/about/join",
        component: AboutJoin
      },
    ]
  },
  {
    path: "/profile",
    component: Profile
  },
  {
    path: "/user",
    component: User
  }
]

export default routes;

调用1：

调用2（嵌套路由）：

码农公寓

React Router

前端路由的原理

URL的hash

HTML5的history

react-router

Router的基本使用

NavLink的使用

Switch的作用

Redirect

路由的嵌套

手动路由跳转

参数传递

动态路由

search传递参数

Link中to传入对象

react-router-config

相关文章