react-router路由

安装react-rooter 

jspm install react-router@1.0.0-rc1

 

导入 

import {Router,Route,Link,IndexRoute,Redirect} from 'react-router';

 

 

 //App
class App extends React.Component{
render(){
    return (
<div>
   <div className="ui menu>
   <Link to="/' className='item'>首页</Link>
  <Link to="tv" className='item' query={{orderby:"date"}}>电视</Link>  //query添加一个查询符
   </div>
   {this.props.childern}
</div>
)}
}
//TV
class TV extends React.Component{
constructor(props){
super(props);
let{query}=this.props.location;
console.log(query);
}
render(){
    return (
  <div>
   <div className="ui menu>电视节目列表</div>
   {this.props.childern}
  </div>
)
}
}
//Show
class Show extends React.Component{
constructor(props){
super(props)
console.log(this.props.params);
}
render(){return(<h3>节目{this.props.params.id}</h3>)}
}
//Home
class Home extends React.Component{
render(){
return (
<div className="ui">首页内容</div>
)
}
}
function handlerEnter(){
console.log('进入');
}

function handlerLeave(){
console.log('离开');
}

ReactDOM.render((
<Router>
<Route path="/" component={App}>
<IndexRoute component={Home}/>

   <Route path="tv" component={TV}>

      <Route  path="shows/:id" component={Show}>
       onEnter={handlerEnter}  //进入路由发生
       onLeave={handerLeave} //离开路由发生

     </Route>//id是所带的参数

      <Redirect from ="shows/:id" to="/shows/:id"//重定向

   </Route>

</Route>
</Router>
),document.getElementsById("app"))