react路由
undefined
everything starts & endsReactRouter 使用指南发表于：2014-09-20
在构建一个复杂的页面时，给不同的操作赋予不同的路由（route）是一个很好的实践。对于习惯Backbone的人来说 ReactRouter（github地址）是由Ryan Florence开发的应用于ReactJS的路由组件，它通过定义ReactJS组件 快速上手一个最基本的页面，菜单有「图书」和「电影」两个选项，点击「图书」显示图书列表（链接变为/books），点击「电影」显示电影列表（链接变为/movies）。 DEMO varReactRouter=require('react-router');
varRoutes=ReactRouter.Routes;
varRoute=ReactRouter.Route;
//定义整个页面的路由结构
varroutes=(
<Routeslocation="hash">
<Routepath="/"handler={App}>
<Routepath="books"name="bookList"handler={Books}/>
<Routepath="movies"name="movieList"handler={Movies}/>
</Route>
</Routes>);
这样就定义了包含两条路由规则的路由，一条指向 /books，一条指向 /movies。(严格来说应该是三条路由，还有一个指向 / 的路由)
<Routepath="books"name="bookList"handler="Books"/> 点击后浏览器中的路径就会变为 而handler是指当这条路由被触发时该渲染哪个组件，其中 上面我们定义了整个页面的路由规则，但总需要点击一个什么链接才能触发这个路由吧，下面我们就来加上这么一个 //在上述代码的基础上
varLink=ReactRouter.Link;
varApp=React.createClass({
render:function(){
return(<divclassName="main">
<nav>
<Linkto="bookList">图书</Link>
<Linkto="moviewList">电影</Link>
</nav>
<divclassName="content">
<this.props.activeRouteHandler/>
</div>
</div>
);
}
};
//routes在上述代码中已定义
React.renderComponent(routes,document.body);
在上述代码中我们新require了一个React组件 <Linkto="bookList">图书</Link> 点击后就会触发 <Routepath="books"name="bookList"handler="Books"/> 从而导致 问题又来了，哪一行代码定义了该渲染哪个组件呢？注意我们的 另外还需要注意一点，和我们习惯中的React渲染方式不同，最终渲染到DOM上的组件并不是常规的React组件，而是我们定义的 DEMO 进阶使用把玩一下DEMO你会发现，虽然路由起作用了（由于jsfiddle沙盒的限制，路由的改变并没有反映到浏览器的地址栏中），但是在默认状态下除了两个菜单项啥都没有渲染，这和我们的预期不符。 Redirect如果你想默认就显示所有图书，即默认渲染 varRedirect=ReactRouter.Redirect;
varroutes=(
<Routeslocation="hash">
<Routepath="/"handler={App}>
<Routepath="books"name="bookList"handler={Books}/>
<Routepath="movies"name="movieList"handler={Movies}/>
<Redirectto="bookList"/>
</Route>
</Routes>);
和 DEMO DefaultRoute如果你不想默认显示图书或电影，而是另一个组件，比如欢迎信息什么的，可以使用 varDefaultRoute=ReactRouter.DefaultRoute;
varroutes=(
<Routeslocation="hash">
<Routepath="/"handler={App}>
<Routepath="books"name="bookList"handler={Books}/>
<Routepath="movies"name="movieList"handler={Movies}/>
<DefaultRoutehandler={Welcome}/>
</Route>
</Routes>);
这样在访问 / 时，默认会渲染 DEMO 路由参数及嵌套路由业务逻辑更复杂了，现在除了点击「图书」显示图书列表，点击「电影」显示电影列表外，点击某一本图书（或某一部电影）还要显示对应的详情。 DEMO 首先更新路由对象 varroutes=(
<Routeslocation="hash">
<Routepath="/"handler={App}>
<Routepath="books"name="bookList"handler={Books}>
<Routepath=":bookId"name="book"handler={Book}/>
</Route>
<Routepath="movies"name="movieList"handler={Movies}>
<Routepath=":movieId"name="movie"handler={Movie}/>
</Route>
<DefaultRoutehandler={Welcome}/>
</Route>
</Routes>);
和之前的路由对象类似，需要嵌套的路由直接进行嵌套即可（完全就是字面意思嘛），但是注意到我们的 详细的介绍见路由匹配规则。 既然我们的路由更新了，那么对应的 handler 也应该进行更新。首先给 注意在渲染单个图书或电影的组件中，我们可以通过 另外还要注意一点，正如你在DEMO中看到的，嵌套的路由对应的 DEMO 小技巧这里还有另外一个问题，如果我们想点击某本书的时候不再显示图书列表而是只显示菜单和图书详情该怎么办呢？我们再对路由对象进行小小的改动。 DEMO varroutes=(
<Routeslocation="hash">
<Routepath="/"handler={App}>
<Routepath="books"name="bookList"handler={BookRoute}>
<Routepath=":bookId"name="book"handler={Book}/>
<DefaultRoutehandler={Books}/>
</Route>
<Routepath="movies"name="movieList"handler={MovieRoute}>
<Routepath=":movieId"name="movie"handler={Movie}/>
<DefaultRoutehandler={Movies}/>
</Route>
<DefaultRoutehandler={Welcome}/>
</Route>
</Routes>);
首先我们修改了原本显示图书列表及电影列表的handler，将它们改为新的React组件 其次我们将原本的列表当做 DEMO ReactRouter小结以上基本覆盖了SPA中对于路由使用的大多数use case，除了上述功能外，ReactRouter还提供了用于获取当前active路由的mixin 最后还有个小内幕，React的核心作者之一也参与了ReactRouter的开发，因此看来ReactRouter还是很有潜力的！
|