Question

为什么react-router中的link用不了

Answer 1

其实例子里的代码已经很老了，React Router 的 API 也发生了很多变化。因此今天抽出一晚上的时间，再以最新的 React Router 稳定版（截止 2015年08月18日21:23:40 为 v0.13.3 版，与 React 版本号一致）为基础讲讲如何使用 React Router。
阅读本文需要你有一定的 ReactJS 基础，如果你正在寻找 ReactJS 中文入门教程，推荐我参与翻译的 React - 引领未来的用户界面开发框架 一书。
快速上手
一个最基本的页面，菜单有「图书」和「电影」两个菜单项，点击「图书」显示图书列表（链接变为/books），点击「电影」显示电影列表（链接变为/movies）。
Demo
说实话，这个例子并不简单。下面逐步分析一下用到的代码和它们分别是干什么的。
var Router = ReactRouter; // 由于是html直接引用的库，所以 ReactRouter 是以全局变量的形式挂在 window 上
var Route = ReactRouter.Route;
var RouteHandler = ReactRouter.RouteHandler;
var Link = ReactRouter.Link;
var StateMixin = ReactRouter.State;
由于 Demo 需要直接从网页上引用 React 和 React Router，因此它们都被挂在了 window 对象上（现在但凡有点追求的前端都上 webpack 了，但是例子的话大家就将就着看吧）。这几行就是获取 ReactRouter 提供的几个组件和 mixin。
接下来声明了 4 个组件，都是最基本的只有 render 方法的 React 组件，分别是： Movies 电影列表 、 Movie 电影详情 、 Books 图书列表 、 Book 图书详情 。
关于组件唯一需要说明的是用到了 ReactRouter 提供的 State 这个 mixin，主要功能就是让组件能够通过 this.getParams() 或 this.getQuery() 等方法获取到当前路由的各种值或参数。
然后是应用的入口，也是我们渲染菜单的地方：
// 应用入口
var App = React.createClass({
render: function() {
return (
<div className="app">
<nav>
<Link to="movies">电影</Link>
<Link to="books">图书</Link>
</nav>
<section>
<RouteHandler />
</section>
</div>
);
}
});
这里用到了两个 ReactRouter 提供的组件： Link 和 RouteHandler 。
Link 组件可以认为是 ReactRouter 提供的对 <a> 标签进行封装的组件，你可以查看 Link 组件渲染到 DOM 上其实就是 a 标签。它接受的 props 有 to、params 和 query。to 可以是一个路由的名称（下文会讲到），也可以是一个完整的 http 地址（类似 href 属性）；params 和 query 都是这个链接带的参数，下文细讲。
此外，Link 组件还有一个小特点，就是如果这个 Link 组件指向的路由被激活的话，组件会自动添加一个值为 active 的 className，方便你对当前激活的菜单项设置不同的样式（注意 demo 中红色的菜单项）。
而 RouteHandler 组件是 ReactRouter 的核心组件之一，它代表着当前路由匹配到的 React 组件。假设当前的路由为 /books ，那么 App 这个组件里的 RouteHandler 其实就是 Books 组件。
那么这个关系是怎么得来的呢？就要看下面定义的页面路由了。
// 定义页面上的路由
var routes = (
<Route handler={App}>
<Route name="movies" handler={Movies} />
<Route name="movie" path="/movie/:id" handler={Movie} />
<Route name="books" handler={Books} />
<Route name="book" path="/book/:id" handler={Book} />
</Route>
);
这里又出现了另外一个 ReactRouter 提供的组件 Route ，这个组件就是定义整个页面路由的基础，可以嵌套。
Route 接受的 props 包括 name、path、handler 等等。其中 name 就是上文提到的路由名称，可以通过 <Link to="路由的名称"> 来生成一个跳转到该路由的链接。path 指明的是当前路由对应的 url，如果不指定，那么默认就是 name 对应的值；如果 name 也不指定，那默认是 / ，即根目录。另外 path 还支持指定 params（上文有提到），就是上面的例子中 : 及后面跟着的名称。
params 和 query 的区别在于，params 定义的是「路由」中的参数，比如 /movies/:id ，params 为 id；而 query 是 「URL」中的参数，是跟在 URL 中「?」后面的。定义路由时一般不考虑也不能限制 query 会是什么。
比如 <Route name="movies" handler={Movie} /> 就指明了一条指向 /movies 的路由，当该路由激活时，调用 Movies 这个组件进行渲染。
接下来就是最后一步，根据上面定义的路由判断出当前该渲染哪个组件，并将其渲染到 DOM 中。
// 将匹配的路由渲染到 DOM 中
Router.run(routes, Router.HashLocation, function(Root){
React.render(<Root />, document.body);
});
Router 即 ReactRouter，run 方法接受 2 - 3个参数，其中第一个参数必填，即我们指定的路由规则。第二个参数选填，即路由的实现方式， Router.HashLocation 指明了当前页面使用 hash 变化来实现路由，反映在浏览器的地址栏中就是类似 xxx.com/#/movies 这样的地址。使用这种 Location 的好处是兼容 IE 8，如果你的应用不需要兼容 IE 8，可以使用更高级的 Router.HistoryLocation 。
最后一个参数是一个回调函数，函数的第一个参数是 ReactRouter 判断出的当前路由中需要渲染的根节点组件，在这里就是 <App /> 这个组件（虽然名字叫做 Root，但在本例中 Root 指的就是 App）。