开始使用React Router

未使用React Router

React Router是一个强大的路由库，经常用于实现单页面应用的路由功能。在不使用React Router的情况下，如果要根据点击不同的链接，显示不同组件，可能需要比较繁琐的操作。

使用npm安装使用create-react-app，新建React项目，并编辑App.js文件：

执行npm start，页面上实现了基本的单页面路由功能，导航栏有三个链接，点击不同的链接，下方会渲染出相应的组件。但这样的代码并不简洁，需要专门的属性route保存路由的状态，并且监听页面的hashchange事件，执行相应更改状态的操作，由setState()触发页面的重新渲染。

使用了React Router

执行下面命令安装React Router：

使用React Router来实现与上例相同的页面效果：

除了import相关模块外，App组件的代码得到了非常大的精简。这里的Router使用history的BrowserRouter模式，需要使用router的组件被包裹在<Router>组件中。React Router使用<Link>组件替代超链接<a>，并使用to属性跳转到相应路由。<Route>组件用于接收路由信息，根据匹配到的路径渲染相应组件。

其中/路径的前面使用exact关键字是精确匹配，否则路由会继续向后匹配到/inbox，页面同时渲染出了“首页”和“收件箱”。

路由传参

在上面的例子基础上，删除掉Home、About、Inbox三个组件，将导入导出包之外的代码修改为：

App组件中的Route没有再分别匹配，而是使用了/:id通配符，因为“任何可以被path-to-regexp理解的URL都是有效的”。这里任何以/开始的路径，其后的内容都会作为参数id的值被传递。当然id也可替换为其它任意参数名，通过match.params.参数名来取值。

关于match对象，可再将上面的Child组件更改为以下写法，在控制台查看其内容：

history

React Router建立在history之上，history是一个管理历史会话的JavaScript库。相应的，Web API中的history提供了对浏览器会话记录的原生操作，其中关键的方法是pushState()。

直接在浏览器的控制台执行下面语句：

浏览器的文档路径window.location.pathname会改变为/foo.bar。

直接执行window.location = "#foo"语句也可以更改浏览器的文档路径，但只有指定路径为哈希值的时候才能保持同一文档。