react路由跳转、参数传递和Ajax请求API数据

我项目完整代码请进入我的github“星座运势”github上源码地址欢迎点一下star(^_^)，在这个项目中使用了react框架组件化开发、react路由实现界面跳转和参数传递，此外我所使用的数据来源于ShowAPI接口。

一下为路由部分代码(app.js)

var username = undefined;const routes = [  {    path:"/main",    component:Main,    routes:[      { path: '/main/xingzuo',        component:Xingzuo      },      { path: '/main/faxian',        component: Faxian      },      { path: '/main/starnews',        component: Starnews      },      { path: '/main/personal',        component: Personal      }    ]  },{    path:"/tablestar",    component:TableStar,    routes:[      { path: '/tablestar/jintian',        component:Jintian      },      { path: '/tablestar/mingtian',        component: Mingtian      },      { path: '/tablestar/toweek',        component: Toweek      },      { path: '/tablestar/tomonth',        component: Tomonth      },      { path: '/tablestar/toyear',        component: Toyear      }    ]  }]//这个组件是用来自动生成Route组件用的const RouteTab = (route) => {  return <Route path={route.path}  render={props => (    // 把自路由向下传递来达到嵌套。    <route.component {...props} routes={route.routes} cb={route.cb?route.cb:undefined} username={username}/>  )}/>}const App = () => (  <Router>    <div className='mainWrap'>      {routes.map((route, i) => {        return <RouteTab key={i} {...route}/>      })}    </div>  </Router>)export default App;

下面为跳转界面时，使用到的路由代码

render(){        var routes = this.props.routes;        console.log(routes);        var title = this.state.title;//      console.log(title)        return (            <div className="tablestart">            <div className="TalistHead"><Link to="/main/xingzuo" className="typetime">&lt;</Link>星座运势</div>            <div className="seltime">                 <Link title="day" to="/tablestar/jintian" className="typetime">                今天           </Link>           <Link title="tomorrow" to="/tablestar/mingtian" className="typetime">                明天           </Link>           <Link title="week" to="/tablestar/toweek" className="typetime">                本周           </Link>           <Link title="month" to="/tablestar/tomonth" className="typetime">                本月           </Link>           <Link title="year" to="/tablestar/toyear" className="typetime">                今年           </Link>            </div>            <div className="rsinfo">                {routes.map((route, i) => (          <RouteTab key={i} {...route}/>       ))}                          {/*<Shuju title={title}/>   把上面的routes注释掉就好，实现数据传递*/}            </div>        </div>        );    }

下面是通过map来实现数组遍历，节省了大量代码并且把“title”，“xizo”属性传递给子组件

render(){        var routes = this.props.routes;        var title = this.state.title;        var xizo=this.state.xizo;        var name=this.state.name;        arr=[{"name":"白羊座","xizo":"baiyang","num":"1","startime":"03.21-04-19","icclass":"iconfont icon-xingzuomuyangzuo","title":"day"},            {"name":"金牛座","xizo":"jinniu","num":"2","startime":"04.20-05-20","icclass":"iconfont icon-xingzuojinniuzuo","title":"day"},            {"name":"双子座","xizo":"shuangzi","num":"3","startime":"05.21-06-21","icclass":"iconfont icon-xingzuoshuangzizuo","title":"day"},            {"name":"巨蟹座","xizo":"juxie","num":"4","startime":"06.22-07-22","icclass":"iconfont icon-xingzuojuxiezuo","title":"day"},            {"name":"狮子座","xizo":"shizi","num":"5","startime":"07.23-08-22","icclass":"iconfont icon-xingzuoshizizuo","title":"day"},            {"name":"处女座","xizo":"chunv","num":"6","startime":"08.23-09-22","icclass":"iconfont icon-xingzuochunvzuo","title":"day"},            {"name":"天枰座","xizo":"tiancheng","num":"7","startime":"09.23-10-23","icclass":"iconfont icon-xingzuotianchengzuo","title":"day"},            {"name":"天蝎座","xizo":"tianxie","num":"8","startime":"10.24-11-22","icclass":"iconfont icon-xingzuotianhezuo","title":"day"},            {"name":"射手座","xizo":"sheshou","num":"9","startime":"11.23-12-21","icclass":"iconfont icon-xingzuosheshouzuo","title":"day"},            {"name":"魔蝎座","xizo":"mojie","num":"10","startime":"12.22-01-19","icclass":"iconfont icon-xingzuomojiezuo","title":"day"},            {"name":"水瓶座","xizo":"shuiping","num":"11","startime":"01.20-02-18","icclass":"iconfont icon-xingzuoshuipingzuo","title":"day"},            {"name":"双鱼座","xizo":"shuangyu","num":"12","startime":"02.19-03-20","icclass":"iconfont icon-xingzuoshuangyuzuo","title":"day"},        ];        var asd="/tablestar/jintian:";        var itemarr = arr.map((item,i)=>{        var title=item.title;        var xizo =item.xizo;        return (            <div key={i} className="everystarbox" title={title} id={xizo} name>                <div className="tbbox"><i className={item.icclass}></i></div>                <p className={item.xizo}>{item.name}</p>                <p>{item.startime}</p>                <br/>            </div>        )    })    return (        <div className="warpstartypeBox">            <div className="typebox">                <div className="test">选择你的星座(公历/阳历)</div>                <div className="xzBox">                    {itemarr}                </div>            </div>            <Shuju title={title} xizo={xizo}/>        </div>    );}

下面是发起ajax请求来调取ShowAPI数据的核心代码

data(xizo,title){        let that = this;        console.log("123"+xizo);        $.get("http://route.showapi.com/872-1",{            showapi_appid: 41467,            showapi_sign: 'fc090ece3fed4ab5988e0483ecd0d5cf',            star:xizo,            needTomorrow:1,            needWeek:1,            needMonth:1,            needYear:1        },        function(res){            var listInfo;            if(res&&res.showapi_res_code===0){                console.log("ajax加载："+title)                switch (title){                    case "day":                        listInfo = res.showapi_res_body.day;                        break;                        case "tomorrow":                        listInfo = res.showapi_res_body.tomorrow;                        break;                        case "week":                        listInfo = res.showapi_res_body.week;                        break;                        case "month":                        listInfo = res.showapi_res_body.month;                        break;                        case "year":                        listInfo = res.showapi_res_body.year;                        break;                    default:                        break;                }                   console.log(listInfo);                var daystar=res.showapi_res_body.day;                that.setState({                    goodsinfo:listInfo,                    giday:daystar            });            }     },"json")}