react路由

为什么要使用路由

目前市面上最多的web应用都是SPA单页面应用

只有一个HTML页面，这样的更接近于手机的应用

用户的体验也比较好，对于服务器的压力更小

路由就是用来管理原来多页面的功能

功能：

让用户从一个视图导航到另一个视图，路由就是一套映射规则，是URL和组件对应的关系

使用

1. yarn add react-router-dom 版本号5.2.1

2. 导入三个核心组件

   import {BrowserRouter as Router ，Router，Route，Link } from 'react-router-dom'

3. 使用Router组件包裹整个应用 <Router>应用</Router>

4. 使用Link组件作为导航菜单（路由入口）<Link to="/xxx"> XXX </Link>

5. 使用Route组件配置路由规则和要展示的组件（路由出口）

   <Route path="/xxx" component={XXX} />

使用说明

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

• Link组件 -- 用于指定导航链接

  to属性 -- 浏览器地址中的pathname（location.pathname）

• Route组件-- 指定路由展示组件相关信息

  path -- 路由规则

  component -- 组件

  Route写哪里就在那里渲染

• Link是入口、Route是出口

执行过程

1. 点击Link组件（a标签），修改了浏览器地址中的url
2. React路由监听到地址栏url的变化
3. React路由内部遍历所有的Route组件，使用路由规则Path 与pathname进行匹配
4. 当路由规则与地址栏pathname匹配时，就展示组件内容

编程式导航

通过js代码来实现页面跳转

props.history.push(地址) 使用这个方法时需要将组件也以Route组件的方式使用不能<XXX / >的方式

默认路由

就是将path配置为‘/’

匹配模式

默认情况下React的路由是模糊匹配

模糊匹配规则

只要pathname以path开头就会匹配成功

path--能够匹配的pathname

/ -- 所有的pathname

/first -- /first、/first/a 、/first/a/b 之类的

精确匹配

给Route组件添加exact属性，让其变为精确匹配

给Route组件添加exact属性，让其变为精确匹配

感谢阅读！！！