React学习--react路由基础及使用

一.React路由的理解

1. 什么是路由？
   a. 一个路由就是一个映射关系（key : value）
   b. key为路径，value可能是function或component

当点击路由元素时，不是页面发生了变化，而是路径path变化，例如：

不是127.1.1.550/home.html
而是127.1.1.550/home

路由会监听path的变化，找到对应的路由组件，呈现到页面上

2. 路由分类
   a. 后端路由：
   1）理解：value是function,用来处理客户端提交的请求
   2）工作过程：当node接收到一个请求时，根据请求路径找到匹配的路由，调用理由中的函数来处理请求，返回相应的数据
   b.前端路由：
   1）浏览器端路由，value是component，用于展示页面内容
   2）工作过程：当浏览器的path变为/xxx时，当前路由组件就会变成xxx组件

二.前端路由原理

浏览器的历史记录是一个栈结构，依赖于BOM上的history实现

三.路由的基本使用

安装路由命令：yarn add react-router-dom
因为React是SPA应用，所以只能有一个路由，因为一个页面只能有一个路由
故可以在index.js入口文件中，直接在<App/>外层包裹一个<BrowserRouter>或<HashRouter>

路由的基本使用方法：

首先在使用路由时，必须要先导入

1. 在React中靠路由链接实现切换组件—编写路由链接
   
2. 注册路由:写Route标签进行路径的匹配