React-router路由实践 - 博客频道 - CSDN.NET
xcxiang的博客
分类：react
首先下载react-router
使用时，路由器Router就是React的一个组件。
import { Router } from 'react-router';
render(&Router/&, document.getElementById('app'));
Router组件本身只是一个容器，真正的路由要通过Route组件定义。
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory } from 'react-router';
ReactDOM.render((
history={hashHistory}&
component={Home}/&
path="login" component={Login}/&
path="test" component={Test}/&
path="*" component={NotFound}/&
),document.getElementById('root'));
上面代码中，用户访问根路由/，组件APP就会加载到document.getElementById(‘root’)。你可能还注意到，Router组件有一个参数history，它的值hashHistory表示，路由的切换由URL的hash变化决定，即URL的#部分发生变化。举例来说，用户访问，实际会看到的是。
一、嵌套路由
Route组件还可以嵌套。
history={appHistory}&
path='/' component={Home}&
path="login" component={Login}/&
path="test" component={Test}/&
path="*" component={NotFound}/&
上面代码中，用户访问/login时，会先加载App组件，然后在它的内部再加载Home组件。
二、path 属性
Route组件的path属性指定路由的匹配规则。这个属性是可以省略的，这样的话，不管路径是否匹配，总是会加载指定组件。
path="home" component={Home}&
path="user/:id" component={User} /&
上面代码中，当用户访问/home/user/:id时，会加载下面的组件。
如果省略外层Route的path参数，写成下面的样子。
component={Home}&
path="home/user/:id" component={User} /&
现在用户访问/home/user/:id时，组件加载还是原来的样子。
三、IndexRoute 组件
path="/" component={App}&
component={Home}/&
path="login" component={Login}/&
path="test" component={Test}/&
path="*" component={NotFound}/&
指定默认情况下加载的子组件
现在，用户访问/的时候，加载的组件结构如下。
注意，IndexRoute组件没有路径参数path。
四、Redirect重定向
组件用于路由的跳转，即用户访问一个路由，会自动跳转到另一个路由。
&Route path="home" component={Home}&
{/* 从 /home/user/:id 跳转到 /user/:id */}
＜Redirect from="user/:id" to="/user/:id" /&
现在访问/home/user/2，会自动跳转到/user/2。
五、IndexRedirect 组件
IndexRedirect组件用于访问根路由的时候，将用户重定向到某个子组件。
path="/" component={App}&
＜IndexRedirect to="/welcome" /&
path="welcome" component={Welcome} /&
path="about" component={About} /&
上面代码中，用户访问根路径时，将自动重定向到子组件welcome。
Link组件用于取代&a& 元素，生成一个链接，允许用户点击后跳转到另一个路由。它基本上就是&a&元素的React 版本，可以接收Router的状态。
render() {
role="nav"&
& to="/about"&About&&
& to="/repos"&Repos&&
如果希望当前的路由与其他路由有不同样式，这时可以使用Link组件的activeStyle属性。
to="/about" activeStyle={{color: 'red'}}About&
to="/repos" activeStyle={{color: 'red'}}Repos&
上面代码中，当前页面的链接会红色显示。
另一种做法是，使用activeClassName指定当前路由的Class。
&Link to="/about" activeClassName="active"&About&/Link&
&Link to="/repos" activeClassName="active"&Repos&/Link&
上面代码中，当前页面的链接的class会包含active。
在Router组件之外，导航到路由页面，可以使用浏览器的History API，像下面这样写。
import { browserHistory } from 'react-router';
browserHistory.push('/some/path');
七、histroy 属性
Router组件的history属性，用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配。
history属性，一共可以设置三种值。
browserHistory
hashHistory
createMemoryHistory
如果设为hashHistory，路由将通过URL的hash部分（#）切换，URL的形式类似/#/some/path。
import { hashHistory } from 'react-router'
&Router history={hashHistory} routes={routes} /&,
document.getElementById('app')
如果设为browserHistory，浏览器的路由就不再通过Hash完成了，而显示正常的路径/some/path，背后调用的是浏览器的History API。
import { browserHistory } from 'react-router'
&Router history={browserHistory} routes={routes} /&,
document.getElementById('app')
但是，这种情况需要对服务器改造。否则用户直接向服务器请求某个子路由，会显示网页找不到的404错误。
如果开发服务器使用的是webpack-dev-server，加上–history-api-fallback参数就可以了。
$ webpack-dev-server –inline –content-base . –history-api-fallback
createMemoryHistory主要用于服务器渲染。它创建一个内存中的history对象，不与浏览器URL互动。
const history = createMemoryHistory(location)
八、路由钩子函数
每个路由都有Enter和Leave钩子，用户进入或离开该路由时触发。
&Route path="about" component={About} /&
＜Route path="inbox" component={Inbox}&
＜Redirect from="messages/:id" to="/messages/:id" /&
上面的代码中，如果用户离开/messages/:id，进入/about时，会依次触发以下的钩子。
/messages/:id的onLeave
/inbox的onLeave
/about的onEnter
下面是一个例子，使用onEnter钩子替代组件。
path="inbox" component={Inbox}&
path="messages/:id"
({params}, replace) =& replace(`/messages/${params.id}`)
下面是一个高级应用，当用户离开一个路径的时候，跳出一个提示框，要求用户确认是否离开。
const Home = withRouter(
React.createClass({
componentDidMount() {
this.props.router.setRouteLeaveHook(
this.props.route,
this.routerWillLeave
routerWillLeave(nextLocation) {
if (!this.state.isSaved)
return '确认要离开？';
上面代码中，setRouteLeaveHook方法为Leave钩子指定routerWillLeave函数。该方法如果返回false，将阻止路由的切换，否则就返回一个字符串，提示用户决定是否要切换。
九、通配符
path属性可以使用通配符。
&Route path="/hello/:name"&
// 匹配 /hello/michael
// 匹配 /hello/ryan
&Route path="/hello(/:name)"&
// 匹配 /hello
// 匹配 /hello/michael
// 匹配 /hello/ryan
&Route path="/files/*.*"&
// 匹配 /files/hello.jpg
// 匹配 /files/hello.html
&Route path="/files/*"&
// 匹配 /files/
// 匹配 /files/a
// 匹配 /files/a/b
&Route path="/**/*.jpg"&
// 匹配 /files/hello.jpg
// 匹配 /files/path/to/file.jpg
通配符的规则如下。
（1）:paramName
:paramName匹配URL的一个部分，直到遇到下一个/、?、#为止。这个路径参数可以通过this.props.params.paramName取出。
()表示URL的这个部分是可选的。
*匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式。
** 匹配任意字符，直到下一个/、?、#为止。匹配方式是贪婪模式。
path属性也可以使用相对路径（不以/开头），匹配时就会相对于父组件的路径，可以参考上一节的例子。嵌套路由如果想摆脱这个规则，可以使用绝对路由。
路由匹配规则是从上到下执行，一旦发现匹配，就不再其余的规则了。
&Route path="/comments" ... /&
&Route path="/comments" ... /&
上面代码中，路径/comments同时匹配两个规则，第二个规则不会生效。
设置路径参数时，需要特别小心这一点。
path="/:userName/:id" component={UserPage}/&
path="/about/me" component={About}/&
上面代码中，用户访问/about/me时，不会触发第二个路由规则，因为它会匹配/:userName/:id这个规则。因此，带参数的路径一般要写在路由规则的底部。
此外，URL的查询字符串/foo?bar=baz，可以用this.props.location.query.bar获取。
xingaichenai
排名：千里之外
（2）（2）09:09:00 UTC
/*header引入部分*/javascript/libs/react.jsjavascript/libs/JSXTransformer.js
var About = React.createClass({
render: function () {
return &h2&About&/h2&;
var Inbox = React.createClass({
render: function () {
return &h2&Inbox&/h2&;
var Home = React.createClass({
render: function () {
return &h2&Home&/h2&;
var Router = require('react-router');
var Route = Router.R
var RouteHandler = Router.RouteH
var App = React.createClass({
render : function(){
&h1&App&/h1&
&RouteHandler/&
// declare our routes and their hierarchy
var routes = (
&Route path="/" handler={App}&
&Route path="about" handler={About}/&
&Route path="inbox" handler={Inbox}/&
Router.run(routes, Router.HashLocation, (Root) =& {
React.render(&Root/&, document.body);
/*提示错误信息*/Uncaught SyntaxError: missing ) after argument list这个是直接抄React Router 的示例。但一直不成功。求指点。
09:13:29 UTC
有用ReactJs做过一些页面。今天看了一下React Router 测试不通过。请大家帮忙解答，给示例吧。
09:25:32 UTC
看问题是少了个括弧(代码太长下班来不及看, 最好留个出处的连接), 要不然js加的不对, 而且末尾用es6的写法, jsxtransformer能认吗? 凭经验, 要不然就是jsx写漏了"/&". BTW, 俺都是直接用babel+webpack处理的, 很少用jsxtransformer在页面上调, 给你看个例子:
09:52:32 UTC
使用 React Router 需要用其他js框架（Node.js、Flux等）吗？看不懂类似：import React from 'react';这种语法。
我是直接用 src="/react-router/0.13.3/ReactRouter.min.js" 导入React Router文件。这样是不是错了。
10:30:33 UTC
在末尾看到了es6的箭头函数，不知道楼主有没有用babel等工具？
05:41:40 UTC
没有啊！我是在GitHub 上看到的实例。没有用babel工具。使用
React Router
Node.js吗？？
05:43:00 UTC
es6的语法，你的浏览器并不支持，先用babel转成es5吧，
01:17:30 UTC
楼主应该是没有使用CommonJS或者AMD吧！如果直接通过script标签引入的话，参考下面的代码：
&script src="js/lib/react/react.js"&&/script&
&script src="js/lib/react/JSXTransformer.js"&&/script&
&script src="js/lib/react-router/build/umd/ReactRouter.js"&&/script&
&script type="text/jsx"&
var About = React.createClass({
render: function () {
return &h2&About&/h2&;
var Inbox = React.createClass({
render: function () {
return &h2&Inbox&/h2&;
var Home = React.createClass({
render: function () {
return &h2&Home&/h2&;
var Router = ReactR
var Route = Router.R
var RouteHandler = Router.RouteH
var App = React.createClass({
render : function(){
&h1&App&/h1&
&RouteHandler/&
// declare our routes and their hierarchy
var routes = (
&Route path="/" handler={App}&
&Route path="about" handler={About}/&
&Route path="inbox" handler={Inbox}/&
Router.run(routes, Router.HashLocation, function (Handler) {
React.render(&Handler/&, document.body);
09:12:11 UTC
thank you..... 已通过。还在学webpack。所以没有用commomJS
12:48:18 UTC
这么写，在IE8 下面报错说
ReactRouter 未定义, 不知道你有没有遇到
03:44:35 UTC
ReactRouter0.13.3不支持IE8
04:36:29 UTC
现在引 ReactRouter 1.0.0 的UMD版本 一样报错，有解决办法么？
06:58:46 UTC
ReactRouter1.0版本现在还是beta版，测试了下还是存在问题，但至少页面能够显示了，一定要使使用ReactRouter的话，只能等正式版看看了。必须支持IE8的话，可以选择使用已有的JS路由库，如director.js，然后用react组件包装下，具体可以参考（用了backbone的路由实现）。
07:51:48 UTC
谢谢啦，看来我就先不在ReactRouter上多折腾了。
还好现在代码逻辑不复杂，刚刚用 把 ReactRouter 替换掉了。正在播放：用 react-router 优化多页面 React 应用程序
下载学院APP缓存视频离线看
购买本课程后即可享受以下服务:
24小时讲师答疑
所有课时永久观看
购买课程返学分
价格：?599
购买本课程后，就可以记笔记了~~
开始记笔记……
记录时间点
我的笔记同学的笔记
购买本课程后，就可以提问题了~~
向老师提问……
记录时间点
我的问题同学的问题React Router 2.0 发布，React 路由解决方案
React Router 2.0 发布了，这是一个大的更新版本，值得关注的改进有：清理 History 和 Router 之间 API 代码的耦合提供和其他库的更简洁的集成，如 Redux, Relay, Async Props 等停止使用 Context 相关的 API详细介绍请看。React Router 一个用于
的路由解决方案（routing solution）。它轻松可以同步你的 app 和 URL，同时给嵌套，转换，和服务端渲染一流的支持。特性：嵌套视图映射到嵌套路由模块化构建路由层级同步和异步转移挂钩转换中止/重定向/重试动态 segments查询参数当 .active 类的路由活动时可以自动链接Multiple root routesHash 或 HTML5 历史 （含备份) URLs声明重定向路由声明未找到路由浏览器滚动行为带有转变效果
React Router 的详细介绍：
React Router 的下载地址：
转载请注明：文章转载自 开源中国社区
本文标题：React Router 2.0 发布，React 路由解决方案
本文地址：
引用来自“Holt_Vong”的评论毛线。。。后端说不定要干前端的活呢基情满满！
毛线。。。后端说不定要干前端的活呢
引用来自“徐涛”的评论js做路由通常都是用http://a.com/#/route，这样的链接来标示路由的，当然#可以换成其他符号，HTML5里还可以省略#直接就用普通链接标示。后端地址通常只是提供数据，通过AJAX访问，在对js进行压缩以后，还是可以达到一定的隐藏目的的，但是完全隐藏还是达不到。引用来自“kideny”的评论那js做路由，优势在哪里？引用来自“latyas”的评论优势在后段代码只需要专注于业务接口，而表现层分离到前端解决 引用来自“徐涛”的评论正解。js做路由的优势就是后端不必再提供前端页面或者页面片段的生成，只需要专心做业务即可。前端负责分析后端提供的业务数据，并且生成页面内容。但是js做路由有一个劣势，那就是所有的页面资源都要加载到客户机内存里，页面首次打开速度较慢，但是运行起来就比较快了。可延迟加载
引用来自“徐涛”的评论js做路由通常都是用http://a.com/#/route，这样的链接来标示路由的，当然#可以换成其他符号，HTML5里还可以省略#直接就用普通链接标示。后端地址通常只是提供数据，通过AJAX访问，在对js进行压缩以后，还是可以达到一定的隐藏目的的，但是完全隐藏还是达不到。引用来自“kideny”的评论那js做路由，优势在哪里？引用来自“latyas”的评论优势在后段代码只需要专注于业务接口，而表现层分离到前端解决 正解。js做路由的优势就是后端不必再提供前端页面或者页面片段的生成，只需要专心做业务即可。前端负责分析后端提供的业务数据，并且生成页面内容。但是js做路由有一个劣势，那就是所有的页面资源都要加载到客户机内存里，页面首次打开速度较慢，但是运行起来就比较快了。
引用来自“徐涛”的评论js做路由通常都是用http://a.com/#/route，这样的链接来标示路由的，当然#可以换成其他符号，HTML5里还可以省略#直接就用普通链接标示。后端地址通常只是提供数据，通过AJAX访问，在对js进行压缩以后，还是可以达到一定的隐藏目的的，但是完全隐藏还是达不到。引用来自“kideny”的评论那js做路由，优势在哪里？优势在后段代码只需要专注于业务接口，而表现层分离到前端解决
引用来自“徐涛”的评论js做路由通常都是用http://a.com/#/route，这样的链接来标示路由的，当然#可以换成其他符号，HTML5里还可以省略#直接就用普通链接标示。后端地址通常只是提供数据，通过AJAX访问，在对js进行压缩以后，还是可以达到一定的隐藏目的的，但是完全隐藏还是达不到。那js做路由，优势在哪里？
js做路由通常都是用http://a.com/#/route，这样的链接来标示路由的，当然#可以换成其他符号，HTML5里还可以省略#直接就用普通链接标示。后端地址通常只是提供数据，通过AJAX访问，在对js进行压缩以后，还是可以达到一定的隐藏目的的，但是完全隐藏还是达不到。
文中提到了“服务器端渲染”～再谈 React Router 使用方法 - 推酷
再谈 React Router 使用方法
去年 9 月份写了一篇ReactRouter 使用指南，不小心在百度搜索「react-router」关键词排到了第一名。最近收到很多同学反馈说这篇文章里的例子挂了让我补一下。
其实例子里的代码已经很老了，React Router 的 API 也发生了很多变化。因此今天抽出一晚上的时间，再以最新的 React Router 稳定版（截止 日21:23:40 为 v0.13.3 版，与 React 版本号一致）为基础讲讲如何使用 React Router。
阅读本文需要你有一定的 ReactJS 基础，如果你正在寻找 ReactJS 中文入门教程，推荐我参与翻译的
一个最基本的页面，菜单有「图书」和「电影」两个菜单项，点击「图书」显示图书列表（链接变为/books），点击「电影」显示电影列表（链接变为/movies）。
说实话，这个例子并不简单。下面逐步分析一下用到的代码和它们分别是干什么的。
var Router = ReactR // 由于是html直接引用的库，所以 ReactRouter 是以全局变量的形式挂在 window 上
var Route = ReactRouter.R
var RouteHandler = ReactRouter.RouteH
var Link = ReactRouter.L
var StateMixin = ReactRouter.S
由于 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() {
&div className=&app&&
&Link to=&movies&&电影&/Link&
&Link to=&books&&图书&/Link&
&RouteHandler /&
&/section&
这里用到了两个 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} /&
这里又出现了另外一个 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 变化来实现路由，反映在浏览器的地址栏中就是类似 </#/movies 这样的地址。使用这种 Location 的好处是兼容 IE 8，如果你的应用不需要兼容 IE 8，可以使用更高级的 Router.HistoryLocation 。
最后一个参数是一个回调函数，函数的第一个参数是 ReactRouter 判断出的当前路由中需要渲染的根节点组件，在这里就是 &App /& 这个组件（虽然名字叫做 Root，但在本例中 Root 指的就是 App）。
最后的最后，就是熟悉的 React API，将 Root 渲染到 DOM 中，看到的结果如下：
尝试点击一下各种链接看看效果吧！
上面贴了这么多代码分析了这么一大段，只实现了一个非常基础的 ReactRouter 路由例子。你在把玩这个例子的时候应该会发现，页面默认打开的时候（即路由为 / 的时候），除了菜单什么也没有显示，显得比较单调。
这个时候你有两种选择：使用 DefaultRoute 或 Redirect 。
如果我们希望页面默认进来的时候除了菜单之外再显示一个类似首页的组件，那么可以用 ReactRouter 提供的 DefaultRoute 。
// 定义页面上的路由
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} /&
&DefaultRoute handler={Index} /&
注意 routes 中定义的路由，多了一个 DefaultRoute，它的 handler 是 Index 组件，即我们希望用户在默认打开页面时看到的组件内容。
如果你不想这么麻烦，想用户进来默认就看到电影列表，则可以使用 Redirect 组件。
// 定义页面上的路由
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} /&
&Redirect to=&movies& /&
可以看到，当我们直接访问这个 URL 的时候，自动被重定向到了 /movies 。Redirect 同时接受 from 这个 props，可以指定当什么规则下才进行重定向。
配合 DefaultRoute 和 Redirect，我们的路由已经基本成型了，但是目前还遇到一个问题：在显示电影详情或图书详情时，对应的菜单项没有高亮。
这是为什么呢？上文说到了 Link 组件会在指向的路由被激活时自动添加值为 「active」 的 className。而我们的两个 Link 分别指向的是 /movies 和 /books 。而详情页的 URL 是 /movie/1 或 /book/1 这种形式，显然不满足 Link 被激活的条件。
这个时候又有两个方案可以选择了……「嵌套路由」或是「动态判断」。
让我们对路由进行一些改造：
// 定义页面上的路由
var routes = (
&Route handler={App}&
&Route name=&movies& handler={Movies}&
&Route name=&movie& path=&:id& handler={Movie} /&
&Route name=&books& handler={Books}&
&Route name=&book& path=&:id& handler={Book} /&
同时改造一下图书列表和电影列表组件：
* 图书列表组件
var Books = React.createClass({
render: function() {
&li key={1}&&Link to=&book& params={{id: 1}}&活着&/Link&&/li&
&li key={2}&&Link to=&book& params={{id: 2}}&挪威的森林&/Link&&/li&
&li key={3}&&Link to=&book& params={{id: 3}}&从你的全世界走过&/Link&&/li&
&RouteHandler /&
注意到首先我们的路由变成了嵌套模式，原本电影列表和电影详情的路由是平级的，一个指向 /movies ，一个指向 /movie/:id 。改造之后，路由形成了嵌套关系，电影列表的路由依然是 /movies ，而电影详情变成了 /movies/:id 。
经过改造之后显示详情的时候菜单可以正确的高亮了，然而列表内容也被显示了出来，很多时候我们并不需要列表和详情同时出现，这个时候就需要另一种路由处理方式：动态判断。
其实我们的路由从最开始就存在嵌套模式，记得最外层 handler 是 App 的 Route 吗？里面所有的路由都是被嵌套的。
让我们再次对路由进行改造：
// 定义页面上的路由
var routes = (
&Route handler={App}&
&Route name=&movies& path=&/movies/:id?& handler={Movies} /&
&Route name=&books& path=&/books/:id?& handler={Books} /&
取消了嵌套在列表路由下的详情页路由，同时改造了列表页路由的 path，从原来的 /movies 改为 /movies/:id? 。这样的 path 代表着这条路由匹配所有 /movies/ 开头的 URL，同时可能存在一个 id 参数，也可能不存在。
看起来路由变简单了不少，不过对应的代价是组件中的代码需要大改。
主要的变动包括：
列表组件中渲染增加逻辑动态判断
* 图书列表组件
var Books = React.createClass({
mixins: [StateMixin],
render: function() {
var id = this.getParams().
return id ? &Book id={id} /& : (
&li key={1}&&Link to=&books& params={{id: 1}}&活着&/Link&&/li&
&li key={2}&&Link to=&books& params={{id: 2}}&挪威的森林&/Link&&/li&
&li key={3}&&Link to=&books& params={{id: 3}}&从你的全世界走过&/Link&&/li&
&RouteHandler /&
详情页组件不再从路由中获取数据，而是根据父组件提供的 props 进行渲染：
* 单本图书组件
var Book = React.createClass({
render: function() {
&h1&这里是图书 id 为 {this.props.id} 的详情介绍&/h1&
&/article&
ReactRouter 还提供了 willTransitionTo 和 willTransitionFrom 两个静态方法，用于某个组件将要被激活和某个组件将要被取消激活时进行拦截或进行相关操作。
由于这两个 API 很可能在 1.0 正式版中被砍掉，这里就不多做介绍了。
ReactRouter 小结
花了一个晚上的时间把自己一年前挖下的坑松了松土，看到这里你以为自己已经学会 ReactRouter 怎么用了吗？呵呵，偷偷告诉你，ReactRouter 1.0 的 API 变化挺大的（目前已有 1.0 beta3 版）。这个库非常激进，维护的非常频繁，带来的后果就是 API 变动也很频繁。
不管怎么样，拥抱变化吧！
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}