react router

react 中使用路由 router 详解

今天开始最新的一个模块，也是 react 开发中最重要的一部分，就是路由。

什么是路由

路由就是一个映射关系（ key: value）。

key 为路径， value 可能是 function 或者是 component。

我们学习路由的时候会遇到两个经常用的单词 router 和 route。区别是什么呢？ router 是全局的路由器对象。route 是当前激活的路由对象。

打个比方哈，我们自己家里上网需要路由器吧，router 就相当于家里的 路由器。route 就相当于路由器上面的网线插口或者是那个天线，不能没有 router 就是用 route。

react-router-dom

开发 react 项目中使用路由，需要使用一个第三方库，这个第三方库在脚手架创建项目的时候是没有自动给我们安装的，所以说，我们需要自行安装一下，我们先安装 5 版本的，因为我是用的 5 版本，其他版本不保证和我下面说的案例都能匹配起来哈。

react-router-dom 是 react的一个插件库。

专门用来实现一个 SPA 应用。

基于 react 的项目基本都会用到此库。

安装的话使用命令安装：

npm i react-router-dom -S

安装完成，就可以使用 react-router-dom。