购物车结合单页web应用

Posted 2020-12-25 爱吃鱼的猫#

reg.js中

import React, { Component } from "react"
class Reg extends Component{
    render(){
        return(
            <div>
                <ul>
                    <li><label>用户名：</label><input /></li>
                    <li><label>密码：</label><input /></li>
                    <li><label>邮箱：</label><input /></li>
                    <li><label>手机：</label><input /></li>
                    <li><button>注册</button></li>
                    <li><button onClick={this.toLogin.bind(this)}>前往登录</button></li>
                </ul>
            </div>
        )
    }
    // controller
    toLogin(){
        this.props.history.push("/login")
    }
}
export default Reg;

login.js文件中

import React, { Component } from "react"
import { Link } from ‘react-router-dom‘;
class Login extends Component{
    render(){
        return(
            <div>
                <ul>
                    <li><label>用户名：</label><input /></li>
                    <li><label>密码：</label><input /></li>
                    <li><button onClick={this.toMain.bind(this)}>登录</button></li>
                    <li><Link to="/reg">前往注册</Link></li>
                    {/* <li><button  onClick={this.toReg.bind(this)}>前往注册</button></li> */}
                </ul>
            </div>
        )
    }
    // controller
    toMain(){
        this.props.history.push("/main")
    }
    toReg(){
        this.props.history.push("/reg")
    }
}
export default Login;

main.js中

import React, { Component } from "react"
import Quest from ‘./quest/stwo‘
import Goods from ‘./shop/shopT‘;
import { HashRouter as Router, Route,Link } from ‘react-router-dom‘;
class Main extends Component{
    render(){
        return(
            <div>
                <div>
                    <ul>
                        <li><Link to="/main/a1">满减</Link></li>
                        <li><Link to="/main/a2">五折</Link></li>
                    </ul>
                </div>
                <Router>
                    <div>
                        <Route path=‘/main/a1‘ component={Quest} />
                        <Route path=‘/main/a2‘ component={Goods} />
                    </div>
                </Router>
            </div>
        )
    }
}
export default Main;

index.js中

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import Main from ‘./main‘;
import Reg from ‘./reg‘;
import Login from ‘./login‘;
import {
    HashRouter as Router,
    Route
} from ‘react-router-dom‘;
// 登陆注册
ReactDOM.render((
    <Router>
        <div>
            <Route path=‘/reg‘ component={Reg} />
            <Route path=‘/login‘ component={Login} />
            <Route path=‘/main‘ component={Main} />
        </div>
    </Router>
), document.getElementById(‘root‘));