React Router基础学习笔记

React Router基础学习笔记

参考:

http://www.mrfront.com/2016/12/11/react-router-tutorial-part1/

 

React Router是什么：

它是完整的 React 路由解决方案， 保持 UI 与 URL 同步。它拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理。

关键字

Router组件

使用了hashHistory管理路由的历史，通过监听切换 URL 的 hash 变化来动态渲染组件。这里的path=”/” 代表根路径，component={App} 意思是渲染组件 App。当用户访问http://localhost:8080或http://localhost:8080/#/时，组件App将被渲染到document.getElementById(‘app’)中。

 

Route组件

可以定义多个路由，访问http://localhost:8080/#/about和http://localhost:8080/#/reops会看到浏览中分别渲染

其所映射的组件

 

Link组件

几乎等同于<a/>标签，是应用中较常用的组件

Link 组件中的to属性定义了 URL 中 #号 之后的路径参数，所以要和 Route 组件中的 path值相对应。

 

 

 

 

 

路由举例和嵌套原理

路径map为：