React路由介绍
现代的前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生。
- 前端路由功能：让用户从一个视图（页面）导航到另一个视图（页面）
- 前端路由是一套映射规则，在React中，是URL路径与组件的对应关系
- 使用React路由简单来说，就是配置路径和组件
-
路由的基本使用
-
使用步骤
- 安装： npm i react-router-dom
- 如果没有安装yarn工具的，需要先全局安装一下yarn：npm install -g yarn
- 导入路由的三个核心组件： Router / Route / Link
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
使用Router 组件包裹整个应用
使用Link组件作为导航菜单（路由入口）
'
使用Route组件配置路由规则和要展示的组件（路由出口）
常用组件说明
-
Router组件： 包裹整个应用，一个React应用只需要使用一次
- 两种常用的Router： HashRouter和BrowserRouter
- HashRouter： 使用URL的哈希值实现 （localhost:3000/#/first）
- 推荐 BrowserRouter：使用H5的history API实现（localhost3000/first）
-
Link组件： 用于指定导航链接（a标签）
- 最终Link会编译成a标签，而to属性会被编译成 a标签的href属性
-
Routers，Route组件： 指定路由展示组件相关信息
- path属性：路由规则，这里需要跟Link组件里面to属性的值一致
- component属性：展示的组件
- Route写在哪，渲染出来的组件就在哪
