react-router 0.X web 使用

var Router=ReactRouter;
var Route=Router.Route;
var RouteHandler=Router.RouteHandler;
var DefaultRoute =Router.DefaultRoute ;

var Link=Router.Link;

var routes = (
 <Route handler={App}>


   <Route handler={SignedOut}>
     <Route name="signin" handler={SignIn}/>
     <Route name="forgot-password" handler={ForgotPassword}/>
   </Route>
   <Route handler={SignedIn}>
     <Route name="home" handler={Home}/>
   </Route>
   <Route handler={About} />
 </Route>
);

Router.run(routes, function(Handler, state) {
       React.render(<Handler params={state.params} />, document.querySelector('#app'));
 });

如有子组件需要引用<RouteHandler/>

1、当组件内有嵌套的子组件组件内需要引用RouteHandler 来显示子组件<br/>
2、Route 配置可以设置name 在链接时使用 ,path 设置路由地址  handler 指定组件名<br/>
3、顶级Route可以不设置path 默认是/  访问是#/<br/>
4、href 内通过#/XX来跳转到指定状态<br/>
5、Link 链接组件:  to="name" name是Route时设置的名称  params={对象} 传递的参数对象<br/>
params{{id:1,name:cc}}  path="show/:id"  #/show/1  <br/> path中指定的id会从params传递的对象中来找到属性名匹配的值。<br/>
query ={对象}  #/show/id?XX ?传递的参数。
6、DefaultRoute 默认路由可以设置Route下默认显示的组件,当转到about时about 组件会替换掉默认组件<br/>
7、组件参数：通过this.props.params.Xx获取params参数 this.props.query.XX 获取query的参数

Link:

{this.state.data.map(function(item,index){
    return <li>{item.name}{item.age} <Link to="show" params={item} query={{age:item.age}}>show</Link></li>;
})}

<Link to="inbox">inbox</Link>

接收参数：

{this.props.params.id}
{this.props.query}
{this.props.path}

var routes = (
<Route   handler={App} path="/">
<DefaultRoute   handler={Home} />
<Route path="about" handler={About} />
<Route name="inbox" handler={Inbox} />
<Route name="show" path="show/:id" handler={Show} />
   </Route>  
);
Router.run(routes, function(Handler, state) {
       React.render(<Handler params={state.params} />, document.querySelector('#app'));
});

//另一种运行方法
Router.run(routes, Router.HashLocation, function (Root) {
   React.render(<Root/>, document.body);
});

1、组件获取params的第二种方法，比较少用。<br/>
2、定义未找到组件NotFoundRoute <br/>
3、跳转定义：<Redirect  from="direct/:id" to="show" />  from 定义路由规则，to 表示跳转到的组件名<br/>
4、path 以/开头表示绝对路径开头，不会从父级路由继承路由规则<br/>
5、Route 用于声明式映射路由规则到多层嵌套的应用组件，name 路由中唯一的，在link to中使用</br>
path 路径，不写默认是name 如果name也没有，就是path<br/>
handler 指定渲染的组件<br/>
6、Router.create 创建新路由<br/>
<pre>
var router = Router.create({
 routes: routes,
 location: Router.HistoryLocation
});
router.run(callback);
</pre>
7、Router.run(routes,[location,],callback)<br/>
location (可选)默认值是Router.HashLocation 如果你设置了Location 那么它的改变会被监听。如果你设置了一个字符路劲，那么路由会立即匹配并执行回调函数。<br/>
callback(Root,state)回调接收两个参数，root一个包含了所有匹配组件的一个组件，它用来渲染您的组件。
state 匹配状态的对象<br/>
state.path 带有查询参数的当前URL<br/>
state.action一个触发路由改变的操作<br/><br/>
state.pathname不带查询参数的URL<br/>
state.params当前被激活路由匹配路径对应的参数 如 /:id 对应的id值<br/>

//另一种方法获取params的值
var Show=React.createClass({
contextTypes: {
   router: React.PropTypes.func
},
render:function(){
return (
<div>
{this.props.params.id}
{this.props.query}
{this.props.path}
{this.context.router.getCurrentParams().id}
</div>
);
}
})

默认显示组件：

<DefaultRoute   handler={Home} addHandlerKey={true} />

跳转组件：

<Redirect  from="direct/:id" to="show" />

未匹配组件：

<NotFoundRoute  handler={Not} />