React Router学习之旅（一）

React Router是React技术栈中一个非常重要的技术，所以我也开始学习。因为本人是小白，很菜很菜的那种，学习也跟着官方的教程走。因为官方文档是英文，所以我的翻译有点捉鸡，望各位大佬提出错误，本人一定会好好改正。

image.png

首先我们需要下载node.js。因为npm这个包管理工具是基于node.js的。

image.png

接着我们就从github上把官方写好的demo给复制到我们本地，打开cmd，选择你要复制到的盘（比如D盘），然后按照图片上的步骤逐步执行。

image.png

打开localhost:8080，我们就可以看到第一个例子了。

image.png

找到我们克隆的文件夹，打开01-setting-up/modules/App.js，修改里面div的内容，改为：你好！欢迎开始学习React Router!

image.png

浏览器中的相应内容也会相应改变。

我们来看第二个例子：

image.png

例子二告诉我们的是：React Router其实就是一个组件。

image.png

如果我们不对路由进行配置的话，页面上是不会有显示的。我们打开02-rendering-a-route/index.js

image.png

把路由给引入，并修改render方法，接着我们打开8080端口。

image.png

什么都没有发生！！！不对，等等，注意看地址栏那里：

地址栏已经不是localhost:8080，而是酱紫的：

image.png image.png

出现这样子的原因是为什么呢？因为我们使用了hashHistory，它可以帮助我们管理路由的历史记录，也就是为什么localhost:8080后面会有一堆乱七八糟的东西。

image.png

接下来我们为屏幕添加两个链接，也就是我们新建两个组件。我们添加在02-rendering-a-route/modules下，分别命名为About.js和Repos.js，代码如下：

image.png image.png

现在我们要把刚刚写好的两个组件给配置到App页面上去，并给他们添加各自的访问路径。

然后分别打开localhost:8080/#/about和localhost:8080/#/reppos,显示的界面如下：

image.png image.png

例子（三）：

image.png

导航链接

我们的应用中用得最多的组件就是Link组件，Link组件就等同于<a>标签。

我们创建两个链接：

image.png image.png