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',

4000
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"><</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")
}