文件目录格式
import React, { Component } from 'react';
import { render } from 'react-dom';
import { hashHistory } from 'react-router';
import RouteMap from './routes/index.js';
/**
- 根挂载组件
*/
render(
,
document.getElementById('root')
)
react 根目录入口文件
import React, { Component } from 'react';
import { Router, Route, IndexRoute } from 'react-router';
import App from 'common/containers/app.js';
import Error from 'common/containers/error.js';
import Index from './index/index.js';
import PersonalCenter from './personalCenter/personalCenter.js';
import AboutMe from './aboutMe/aboutMe.js';
import ChoosePhone from './choosePhone/choosePhone.js';
import ChooseIDCard from './chooseIDCard/chooseIDCard.js';
import 'common/containers/app.less';
/**
-
路由
*/
class RouteMap extends Component{onUpdate = () => {
window.scrollTo(0,0);
}render(){
return(
<Route path="/Index" component={Index}/> <Route path="/PersonalCenter" component={PersonalCenter}/> <Route path="/AboutMe" component={AboutMe}/> <Route path="/ChoosePhone" component={ChoosePhone} /> <Route path="/ChooseIDCard" component={ChooseIDCard} /> <Route path="*" component={Error} /> </Route> </Router> )}
}
export default RouteMap;
配置文件路径和挂载
/**
- Created by Administrator on 2019/11/25.
- 主页
*/
import React, { Component } from 'react';
import { Router, Route, IndexRoute,hashHistory } from 'react-router';
import 'assets/css/reset.css';
import 'assets/css/index.css';
import 'assets/css/common-btn.less';
import './index.less';
import ImgPhone from "assets/img/icon-phone.png";
import ImgLogo from "assets/img/logo.png";
import ImgTel from "assets/img/icon-tel.png";
class Index extends Component{
constructor(props) {
super(props);
this.state = {
userId:"",
url:"",
menuList:[
{
name:"订单",
url:"/OrderTable"
},
{
name:"信息",
url:"/Information"
},
{
name:"中心",
url:"/PersonalCenter"
}
{
name:"交易明细",
url:"/TransactionDetailTable"
},
{
name:"常见",
url:"/Faq"
},
{
name:"公告",
url:"/News"
}
],
typeList:[
{
typeValue:'0',
name:'扫码'
},
{
typeValue:'1',
name:'扫码'
},
{
typeValue:'2',
name:'扫码'
},
{
typeValue:'3',
name:'选号'
}
]
};
this.routePush = this.routePush.bind(this);
}
routePush=(url)=>{
hashHistory.push(url);
}
render(){
const { visible, menuList,typeList } = this.state;
const elements=[];
const typenum=[];
return(
<div className="container">
<div className="middle">
<div id="certify">
<div className="swiper-container">
{
menuList.map((item,index)=>{
return <button key={index} className="swiper-slide" onClick={()=>this.routePush(item.url)}>
<p>{item.name}</p>
</button>
})
}
</div>
</div>
</div>
)
}
}
export default Index;
页面搭建