用react写一个注册登录页面
时间: 2024-05-13 11:18:03 浏览: 9
好的,以下是一个简单的注册登录页面的代码示例,使用了React和React Router:
```jsx
import React, { useState } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useHistory } from 'react-router-dom';
const Register = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const history = useHistory();
const handleRegister = (e) => {
e.preventDefault();
// 在这里进行注册逻辑处理
// 注册成功后跳转到登录页面
history.push('/login');
}
return (
<div>
<h1>Register</h1>
<form onSubmit={handleRegister}>
<label>Username:</label>
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
<br />
<label>Password:</label>
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
<br />
<button type="submit">Register</button>
</form>
<p>Already have an account? <Link to="/login">Login</Link></p>
</div>
);
}
const Login = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const history = useHistory();
const handleLogin = (e) => {
e.preventDefault();
// 在这里进行登录逻辑处理
// 登录成功后跳转到主页
history.push('/');
}
return (
<div>
<h1>Login</h1>
<form onSubmit={handleLogin}>
<label>Username:</label>
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
<br />
<label>Password:</label>
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
<br />
<button type="submit">Login</button>
</form>
<p>Don't have an account yet? <Link to="/register">Register</Link></p>
</div>
);
}
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/register" component={Register} />
<Route path="/login" component={Login} />
</Switch>
</Router>
);
}
export default App;
```
在上面的代码中,`Register`组件和`Login`组件分别对应注册页面和登录页面,它们都包含一个表单来输入用户名和密码,同时也提供了一个链接来切换到另一个页面。`App`组件则是整个应用的根组件,它使用了`react-router-dom`库来设置路由,当用户访问不同的URL时会渲染不同的组件。其中,`useHistory`Hook可以用来跳转页面。