- 学习资源推荐:https://blog.csdn.net/qq_42813491/article/details/90213353
引包
import { Redirect } from "react-router-dom";
使用
<Redirect to="/home"/>
demo
import React from 'react'
import { Redirect } from "react-router-dom";
class Login extends React.Component {
constructor(props){
super(props);
this.state={
login:false
}
}
doLogin=()=>{
let username=document.querySelector("input[type=text]").value;
let password=document.querySelector("input[type=password]").value;
if(username==="admin"&&password==="123456"){
this.setState({
login :true
})
}
}
render() {
if(this.state.login){
return <Redirect to="/home"/>
}else{
alert("登录失败");
}
return (
<div>
<form onSubmit={this.doLogin}>
账号:<input type="text"/><br/>
密码:<input type="password"/><br/>
<input type="submit" value="登录"/>
</form>
</div>
);
}
}
export default Login;
import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Login from './components/Login'
import Home from './components/Home'
class App extends React.Component {
render() {
return (
<Router>
<Route exact path="/" component={Login} />
<Route path="/home" component={Home} />
</Router>
);
}
}
export default App;
import React from 'react'
class Home extends React.Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (
<h1>这里是首页</h1>
);
}
}
export default Home;
效果图
- 账号密码正确
- 账号或密码错误