React Router 4入门教程（Web Only）

这是一个React Router 4的入门教程，适合初次接触React Router 4的朋友学习。

为了更好的学习，我给大家准备了一个轻松入门的示例项目，由webpack + react 16 + react router 4 + antd mobile开发。

源代码请访问GitHub：

https://github.com/chencl1986/react-router4-training

React Router 4不再需要单独配置路由，而是采用组件思想创建路由，即每个路由都是一个组件。

以下通过这个Demo介绍React Router 4的使用方式（你需要结合Demo中的代码和注释来阅读）：

下载项目后，通过npm install安装，npm run dev启动开发模式，通过http://localhost:8888/地址访问

1. 首先通过npm安装react-router-dom、history，然后打开router.js。

2. 我们通常使用BrowserRouter，这个Demo以BrowserRouter为基础。

3. BrowserRouter作为整个应用路由的入口，它只能传入一个children。

4. 再创建history对象，用来调用push、goBack等方法。值得注意的是，history会自动传入BrowserRouter，不需要我们操作。

5. 接下来，就可以进入Index页面

进入Index页面后：

1. 跳转到Index路由组件时，如果不希望载入父组件内容，即”/”路由的组件，要给”/”路由设置exact属性。

2. 可通过Link标签和history API的方式进行跳转。

3. 通过history API跳转，需要执行this.props.history.push(“/Exact”)。history对象是通过props传入组件。

4. 通过Route引入的组件，才会有history传入，否则需要通过withRouter方法传入，这个后面会讲到。

5. 点击跳转到Exact，为不加载父组件内容直接跳转。NoExact的子页，则会加载父组件内容。

跳转到Exact页面：

1. 值得注意的是，如果设置了exact属性，就需要在父路由组件引入子组件，否则会因为父组件无法显示，而导致子组件也加载不出来。

跳转到ExactInside：

之后返回到Index，跳转到NoExact：

1. 通过该页面代码，可看到按钮都是由另一个组件引入，而这个组件并没有通过Route引入。

2. 也就是说，按钮本身是无法使用history API，这时候就需要withRouter方法进行处理，详见代码。

3. 需要加载的子页面NoExactInside，不需要配置路由，直接在代码内引入，就可以被加载。

接下来，返回Index，点击“测试通过URL获取数据”按钮：

1. 通过params获取URL参数。

   a. 先在Route组件配置路径path={“/GetData/Params/:date”}。

   b. 跳转时url为”/GetData/Params/数据”。

   c. 在组件中通过this.props.match.params.date收取数据。

2. 通过Query获取URL参数。

   a. 先在Route组件配置路径path={“/GetData/Params”}。

   b. 跳转时url为”/GetData/Params?字段=数据”。

   c. React Router 4无法通过this.props.location.query[字段]获取数据，可以引入qs库，通过qs.parse(this.props.location.search.slice(1))[字段]获取数据。