路由的基本使用
使用步骤
-
安装： yarn add react-router-dom
- 如果没有安装yarn工具的，需要先全局安装一下yarn：npm install -g yarn
-
导入路由的三个核心组件： Router / Route / Link
import {BrowserRouter as Router, Route, Link} from 'react-router-dom' -
使用Router 组件包裹整个应用
路由的执行过程
- 当我们点击Link组件的时候，修改了浏览器地址栏中的url
- React路由监听地址栏url的变化
- React路由内部遍历所有的Route组件，拿着Route里面path规则与pathname进行匹配
- 当路由规则（path）能够匹配地址栏中的pathname时，就展示该Route组件的内容
编程式导航
- 场景： 点击登陆按钮，登陆成功后，通过代码跳转到后台首页，如何实现？
- 编程式导航： 通过JS代码来实现页面跳转
- history是React路由提供的，用于获取浏览器历史记录的相关信息
- push(path)： 跳转到某个页面，参数path表示要跳转的路径
- go(n)：前进或后退功能，参数n表示前进或后退页面数量
默认路由
- 现在的路由都是通过点击导航菜单后展示的，如果进入页面的时候就主动触发路由呢
- 默认路由：表示进入页面时就会匹配的路由
- 默认路由：只需要把path设置为
'/'
精准匹配
- 默认路由认可情况下都会展示，如果避免这种问题？
- 给Route组件添加exact属性，让其变为精准匹配模式
- 精确匹配：只有当path和pathname完全匹配时才会展示改路由
小结
- React路由可以有效的管理多个视图实现 SPA
- 路由先需要通过安装
- Router组件包裹整个应用，只需要使用一次
- Link组件是入口，Route组件是出口
- 通过props.history实现编程式导航
- 默认是模糊匹配，添加exact编程精确匹配
- React路由的一切都是组件，可以像思考组件一样思考路由
