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‘));
购物车结合单页web应用
原文地址:https://www.cnblogs.com/cj-18/p/9378979.html