我專案完整程式碼請進入我的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")
}