zoukankan      html  css  js  c++  java
  • 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"))
  • 相关阅读:
    hadoop再次集群搭建(3)-如何选择相应的hadoop版本
    48. Rotate Image
    352. Data Stream as Disjoint Interval
    163. Missing Ranges
    228. Summary Ranges
    147. Insertion Sort List
    324. Wiggle Sort II
    215. Kth Largest Element in an Array
    快速排序
    280. Wiggle Sort
  • 原文地址:https://www.cnblogs.com/guanguan-/p/7886708.html
Copyright © 2011-2022 走看看