react-router 使用

以前写了页面引用的两个版本写法。

以下是node 写法：

var React =require('react');
var ReactDom=require('react-dom');
import { Router, Route, IndexRoute, Link, IndexLink, hashHistory } from 'react-router';

var About = React.createClass({
render: function () {
return (
<div>
<h2>About</h2>
参数props.location.query.name={this.props.location.query.name}
</div>
);
}
});

var Inbox = React.createClass({
render: function () {
return (
<div>
<h2>Inbox</h2>
参数:id={this.props.params.id}<br/>
{this.props.todo.map(function(item){
return (
<p key={item.id}>{item.name} {item.id}</p>
);
})}
</div>
);
}
});

var App = React.createClass({
getInitialState:function(){
return {
todos:[
{id:1,name:'aa'},
{id:2,name:'bb'},
{id:3,name:'cc'}
]
}
},
render: function () {
return (
<div>
<h2>App</h2>
<Link to="/"  activeClassName="active">/</Link><br/>
<Link to={{pathname:'about',query:{name:'about'}}}  activeClassName="active">about</Link><br/>
<Link to="inbox/2"   activeClassName="active">inbox</Link><br/>
{this.props.children && React.cloneElement(this.props.children, {
todo: this.state.todos
})}
</div>
);
}
});
class Index extends React.Component {
render() {
return (
<div>
<h2>Index!</h2>
</div>
)
}
}

//使用hashHistory了
ReactDom.render(
<Router  history={hashHistory} >
<Route path="/" component={App} >
<IndexRoute component={Index}/>
<Route path="about" component={About}/>
<Route path="inbox/:id" component={Inbox}/>
</Route>
</Router>,
document.querySelector('#app')
)

基础没有什么变化 。

嵌套组件传递数据可以用以下：

{this.props.children && React.cloneElement(this.props.children, {

todo: this.state.todos

})}

以前父组件只是输出children现在用了cloneEjement可以传递props了。

对于项目，可以定义好路由规则。通过:id,query传递参数。组件内接收到再获取数据。

路由组件当前一个个功能模块，在组件内可以使用其他的子组件，这样就可以使用props了。

而对于有些子父需要传递props可以用以上的方法。