react新版和旧版的区别

低版本：15.6

npm install create-react-app -g 全局环境的安装

create-react-app name

cd name

npm start  运行

删除package.lock.json文件

npm install react@15.6  react-dom@15.6 jquery --save-dev

传值：

1: params  =》 <Link to="/about/2" activeStyle={style}>关于</Link>  

绑定属性=><Route path="/about/:id" component={About}></Route>

取值=》this.props.params.id

2:query =》 <Link to={{pathname:"/other",query:{id:3}}}>其他</Link>

取值 =》this.props.location.query.id

重定向  <IndexRedirect to=""/> 
      <IndexRoute component={Index}/>    <Rerirect from=""to=""

跳转 this.props.history.push('/home')

视图容器：{this.props.children}

嵌套路由动态监听==》

componentWillReceiveProps(a){
        console.log(a)
        var _this=this;
        $.ajax({
            type:"post",
            url:"http://datainfo.duapp.com/shopdata/getGoods.php",
            dataType:"jsonp",
            // data:({goodsID:_this.props.params.id}),
            data:({goodsID:a.location.query.id}),
            success:function(data){
                _this.setState({str:data[0].detail})
            }
        })
}

高版本：16.4

npm install create-react-app -g 全局环境的安装

create-react-app name

cd name

npm install react-router jquery --save-dev

npm install react-router-dom --save-dev

npm start  运行

导入模块： 
import {BrowserRouter as Router,Route,Link,Redirect} from 'react-router-dom'

路由  

 render() {
    return (
      <div>
          <h1>new版本</h1>
          
      <Router>
        <div>
          <Link to="/home">首页</Link>
          <Link to="/about">关于</Link>
          <hr/>
          <Switch>
            
            <Route path="/home" component={Home}></Route>
            <Route path="/about" component={About}></Route>
            <Redirect to="/home"/>
          </Switch>
        </div>
      </Router>
      </div>
    );
  }
嵌套路由

 render(){
        return(
            <div>
                <h1>首页Home</h1>
                <Router>
                    <div>
                        <ul>
                        {                   
                            this.state.arr.map(function(item,i){
                                return(
                                    <li key={i}><Link to={"/detial/"+item.goodsID}>        
            {item.goodsName}</Link></li>
                                    // <li key={i}><Link to={{pathname:"/detial",query:        
        {id:item.goodsID}}}>{item.goodsName}</Link></li>
                                )
                            })
                        }
                    </ul>
                    <hr />
                    <Route path="/detial/:id" component={Detial}></Route>
                
                    </div>
                
                </Router>   
            </div>
        )

    }

Link写在Router内部形成路由结构（必须写在）

传值 params
取值 this.props.match.params.xxx

传值 query
取值 this.props.location.query.xxx

重定向 ：<Redirect to="/about"/>

跳转：hashHistory.push("/other")