React 实践记录 03 React router
Introduction
本文主要参考了react router 的官方文档。
React Router是一套完整的配合React的路由解决方案,可能你已经知道前端路由,或者知道后端有路由的概念,如下图:
React Router可以帮助我们将URL与组件状态同步,实现路由。
Router Overview
我们先来看看,不使用React Router的话,动态图中的功能要如何实现:
var React = require('react');
var About = React.createClass({
render: function () {
return(
<div>
<h2>About</h2>
<p>这里将会出现N多介绍文字balabala</p>
</div>
);}
});
var blogs = React.createClass({
render: function () {
return(
<div>
<h2>blogs</h2>
<a href="#">文章A</a>
<br />
<a href="#">文章B</a>
<br />
<a href="#">文章C</a>
<br />
<a href="#">文章D</a>
</div>
);}
});
var Home = React.createClass({
render: function () {
return(
<div>
<h2>Home</h2>
<p>这里是首页</p>
</div>
);}
});
var App = React.createClass({
render () {
var Child;
switch (this.props.route) {
case 'about': Child = About; break;
case 'blogs': Child = blogs; break;
default: Child = Home;
}
return (
<div>
<h1>App</h1>
<Child/>
</div>
)
}
});
function render () {
var route = window.location.hash.substr(1);
React.render(<App route={route} />, document.body);
}
window.addEventListener('hashchange', render);
render();
关于react语法细节,请参考博主之前关于react的文章。
每当URL中hash部分改变时,APP组件会渲染一个不同的Child组件。非常简单明了。
但是,一旦我们需要再嵌套一些路由,比如 blogs/react,about/communicate,那么 window.location.hash.substr(1);
这样的逻辑就会变的更为复杂,如果再多嵌套一点呢?
With React Router
多层嵌套的URL以及多层嵌套的组件结构之间的映射是React router的核心,React Router在路由上使用JSX来声明式编程。
var Router = require('react-router');
var Route = Router.Route;
// declare our routes and their hierarchy
var routes = (
<Route handler={App}>
<Route path="about" handler={About}/>
<Route path="blogs" handler={blogs}/>
</Route>
);
我们现在可以去掉之前switch部分的代码,替换成RouteHandler
var RouteHandler = Router.RouteHandler;
var App = React.createClass({
render () {
return (
<div>
<h1>App</h1>
<RouteHandler/>
</div>
)
}
});
最后,我们侦听url的变化,并渲染组件。以下代码将routes渲染到RouteHandler。
Router.run(routes, Router.HashLocation, (Root) => {
React.render(<Root/>, document.body);
});
这里写 => 这种ES6会不会引起兼容性问题?大可放心,webpack会帮忙生成浏览器兼容的代码。
所有的Route组件本身都是不会渲染的,它们只是用于配置。
引入嵌套
我们来看看如何解决之前说的嵌套问题。
再创建一个组件:
var ReactContent = React.createClass({
render: function () {
return(
<div>
<p>这是一篇React 博文</p>
</div>
);}
});
我们可以这样写嵌套路由:
var routes = (
<Route path="/" handler={App}>
<DefaultRoute handler={Home}/>
<Route path="about" handler={About}/>
<Route path="blogs" handler={Blogs}>
<Route path="react" handler={ReactContent}/>
</Route>
</Route>
);
也可以这样写:
var routes = (
<Route path="/" handler={App}>
<DefaultRoute handler={Home}/>
<Route path="about" handler={About}/>
<Route path="blogs" handler={Blogs}/>
<Route path="blogs/react" handler={ReactContent}/>
</Route>
);
这样当然也是可以的
<Route path="blogs/:id" handler={ReactContent}/>
Getting the url parameters
刚才提到了:id,如果我们想获得它,怎么做呢?
//没错,直接可以从handler组件的props中拿到。
var id = this.props.params.id;
DefaultRoute
我们可以给路由提供默认渲染,比如给跟路由加一个,由它完成用户访问index.html(或者你的主页是其它什么。。。)时的渲染任务。
<Route path="/" handler={App}>
<DefaultRoute handler={Home}/>
</Route>
NotFoundRoute
URL:xxx#a/b。 假设,a是有路由的,若a/b没有,那么,我们称之为无法找到路由。请注意区分无法找到路由何无法找到资源的区别。
var NotFound = React.createClass({
render: function () {
return(
<h1>对不起,我们找不到路由哦</h1>
);}
});
<Route path="/" handler={App}>
<DefaultRoute handler={Home}/>
<Route path="about" handler={About}/>
<Route path="blogs" handler={Blogs}/>
<Route path="blogs/react" handler={ReactContent}/>
<NotFoundRoute handler={NotFound} />
</Route>
本文完。