react

文件目录格式

<html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no, email=no" /> <meta name="renderer" content="webkit"> <meta HTTP-EQUIV="pragma" CONTENT="no-cache"> <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <meta HTTP-EQUIV="expires" CONTENT="0"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <title>来点彩</title> </head> <body> <div id="root"></div> </body> 入口的HTML文件

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;
页面搭建

最难就是坚持