直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<script src="https://cdn.bootcss.com/react/15.6.1/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.6.1/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/react-router-dom/4.2.2/react-router-dom.min.js"></script>
<!--注释,这个垫片有版本兼容问题，如果使用太新的版本会造成错误，建议按照当前配置版本来测试和使用--> <script src="https://cdn.bootcss.com/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Login extends React.Component{
constructor(props){
super(props);
this.state = {
account:'',
password:''
};
this.submit = this.submit.bind(this);
this.fieldChange = this.fieldChange.bind(this);
}
fieldChange(ev){
if(ev.target.name=='account'){
this.setState({account:ev.target.value});
}else if(ev.target.name=='password'){
this.setState({password:ev.target.value});
}
}
submit(ev){
ev.preventDefault();
console.log(this.state);
alert('你执行了提交操作');
}
render(){
return (
<div>
<h1>Login</h1>
<form action="./login" method="POST">
<input name="account" type="text" placeholder="账号" onChange={this.fieldChange}/>
<input name="password" type="password" placeholder="密码" onChange={this.fieldChange}/>
<input type="submit" placeholder="登陆" onClick={this.submit}/>
</form>
</div>
);
}
}
class NotFound extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<h1>404</h1>
);
}
}
class App extends React.Component{
constructor(props){
super(props);
}
render(){
return (<div>
<ReactRouterDOM.Link to="/">App</ReactRouterDOM.Link><br/>
<ReactRouterDOM.Link to="/login">Login</ReactRouterDOM.Link>
<h1>App</h1>
</div>);
}
}
ReactDOM.render(
<div>
<ReactRouterDOM.BrowserRouter basename='bms-0f797'>
<ReactRouterDOM.Switch>
<ReactRouterDOM.Route exact path="/" component={App}/>
<ReactRouterDOM.Route exact strict path="/login" component={Login}/>
<ReactRouterDOM.Route path="*" component={NotFound}/>
</ReactRouterDOM.Switch>
</ReactRouterDOM.BrowserRouter>
</div>,
document.getElementById('root'));
</script>
</body>
</html>
注意：所有组件都是帕斯卡格式的，如果扩展中发现不对，请浏览一下源代码，搜索关键字，获得全局变量。例如：ReactRouterDOM，。。。