React 学习笔记 路由

单页和多页

• SPA： Single Page Application 单页面应用程序，整个应用中只有一个页面（index.html）
• MPA : Multiple Page Application多页面应用程序，整个应用中有很多个页面（*.html）

优点

1. 加快页面响应速度，降低了对服务器的压力

   • 传统的多页面应用程序，每次请求服务器返回的都是一整个完整的页面
   • 单页面应用程序只有第一次会加载完整的页面，以后每次请求仅仅获取必要的数据

2. 更好的用户体验，运行更加流畅

路由三大对象之-Router

内容

Router 组件：包裹整个应用，一个 React 应用只需要使用一次

两种常用 Router：HashRouter 和 BrowserRouter

• HashRouter：使用 URL 的哈希值实现（http://localhost:3000/#/first）

  • 原理：监听 window 的 hashchange 事件来实现的

• （推荐）BrowserRouter：使用 H5 的 history.pushState() API 实现（http://localhost:3000/first）

  • 原理：监听 window 的 popstate 事件来实现的

  路由三大对象之-Link

目标

掌握Link和NavLink的区别；

能使用NavLink设置高亮效果；

import { Link, NavLink } from 'react-router-dom'

Link

Link组件最终会渲染成a标签，用于指定路由导航

• to属性，将来会渲染成a标签的href属性
• Link组件无法展示哪个link处于选中的效果

NavLink

NavLink组件，一个更特殊的Link组件，可以用用于指定当前导航高亮

路由三大对象之-Route

目标

掌握配置路由规则

浏览器的路径和path的匹配成功，就会显示组件

route的作用和格式

0. 作用： 决定路由匹配规则
1. 格式：<Route path="/xx/xx" component={组件}></Route>

匹配规则

名词约定：

0. path： Route组件中path属性的值

1. pathname: 指的如下格式

   0. link组件中to的属性值
   1. 地址栏中的地址

模糊匹配规则

0. 只要pathname以path开头就算匹配成功
1. 匹配成功就加载对应组件；
2. 整个匹配过程是逐一匹配，一个匹配成功了，并不会停止匹配。

模糊匹配和精确匹配

0. 默认是模糊匹配的
1. 补充exact可以设置成精确匹配