React 初探（六）- React router

概述

当可以写组件了之后，需要进行一些页面的跳转，那么就需要路由，所以就需要了解一下与 React 相匹配的路由 react router

路由( routing )

概念

路由( routing ) 就是通过互联的网络把信息从源地址传输到目的地地址的活动。路由就是把一个地方的信息传输到它想去的目的地的过程。对于前端来说，路由就是将用户引向不同的页面的过程。

demo

首先写一个简单的demo，当点击 登录 按钮的时候显示登录界面，当点击 注册 的时候显示注册界面。当我将 URL 分享出去的时候，我想让别人直接进入注册界面，但是目前的代码是不能实现这个的，所以需要路由，即让一个用户去他想去的目的地。

浏览器中的 JS 代码如何改变是不会体现到地址栏的，所以在分享的时候分享的是初始状态。所以只要改变 URL，就可以去不同的界面

hash 实现路由

浏览器提供了一种方式 -> hash，当用户点击注册的时候改变 URL 的 hash。demo 添加 hash 功能。当点击 注册 按钮之后，将 URL 分享给他人，便可以直接进入注册页面。所以可以通过不同的界面对应不同的字符串就可以做到路由

history.pushState 实现路由

使用 hash 的时候会有 #，那能否可以使用 /login | /signup 这种路由呢？这时需要使用 H5 API history.pushState()
前提：如果要使用 history.pushState() 实现路由必须让后端将所有路径都指向首页
demo 使用 history.pushState() 实现路由

上述 demo 增加一个路由，可以看到仅仅增加一个路由，却要增加很多代码。但是实际情况中会有很多路由，并且有时候路由不是确定的，即无限个。例如 /users/1 访问第一个用户的信息，/users/2 访问第二个用户的信息，所以这时路由数量是不确定的。

React router

react router 就可以解决上述 demo 的不足，通过 react router 官网的例子进行更改 demo，将 demo 加入 react router