展开全部
作者: 阮一峰
日期: 2016年5月25日
真正学会 React 是一个漫长的过程。
你会发现,它不是一个库,也不是一个框架,而是一个庞大62616964757a686964616fe4b893e5b19e31333365653165的体系。想要发挥它的威力,整个技术栈都要配合它改造。你要学习一整套解决方案,从后端到前端,都是全新的做法。
举例来说,React 不使用 HTML,而使用 JSX 。它打算抛弃 DOM,要求开发者不要使用任何 DOM 方法。它甚至还抛弃了 SQL ,自己发明了一套查询语言 GraphQL 。当然,这些你都可以不用,React 照样运行,但是就发挥不出它的最大威力。
这样说吧,你只要用了 React,就会发现合理的选择就是,采用它的整个技术栈。
本文介绍 React 体系的一个重要部分:路由库React-Router。它是官方维护的,事实上也是唯一可选的路由库。它通过管理 URL,实现组件的切换和状态的变化,开发复杂的应用几乎肯定会用到。
本文针对初学者,尽量写得简洁易懂。预备知识是 React 的基本用法,可以参考我写的《React 入门实例教程》。
另外,我没有准备示例库,因为官方的示例库非常棒,由浅入深,分成14步,每一步都有详细的代码解释。我强烈建议你先跟着做一遍,然后再看下面的API讲解。
([说明] 本文写作时,React-router 是 2.x 版,本文的内容只适合这个版本,与最新的 4.x 版不兼容。目前,官方同时维护 2.x 和 4.x 两个版本,所以前者依然可以用在项目中。2017年3月)
一、基本用法
React Router 安装命令如下。
$ npm install -S react-router
使用时,路由器Router就是React的一个组件。
import { Router } from 'react-router';render(, document.getElementById('app'));
Router组件本身只是一个容器,真正的路由要通过Route组件定义。
import { Router, Route, hashHistory } from 'react-router';render((
), document.getElementById('app'));
上面代码中,用户访问根路由/(比如http://www.example.com/),组件APP就会加载到document.getElementById('app')。
你可能还注意到,Router组件有一个参数history,它的值hashHistory表示,路由的切换由URL的hash变化决定,即URL的#部分发生变化。举例来说,用户访问http://www.example.com/,实际会看到的是http://www.example.com/#/。
Route组件定义了URL路