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可以用以上的方法。