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 版本，其他版本不保证和我下面说的案例都能匹配起来哈。

1. react-router-dom 是 react的一个插件库。
2. 专门用来实现一个 SPA 应用。
3. 基于 react 的项目基本都会用到此库。

安装的话使用命令安装：

npm i react-router-dom -S

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

基本路由案例

我们还是以案例的方式来，做一个简单的案例，在做的过程中，就把基本的用法学了。

我们来做一个最简单的案例。

 

我们做一个超级简单的页面，里面首先是一个大标题，这个是写死的，简单的展示用。然后两个链接，点击链接的时候，浏览器地址的 path 会变化，下面是一个展示区域，点击按钮之后，展示不同的信息。

编写代码

首先在黄色区域要有两个组件 Home 和 About 来实现点击导航菜单的 Home 和 About 来回切换吧？

所以说首先创建两个组件，分别是 Home 和 About ，里面啥都不需要，就展示一段话就可以了吧。

 About 组件