react-router 登录注册代码

以下是一个简单的 react-router 登录注册代码示例：

import React, { useState } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom';

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
      isLoggedIn ? <Component {...props} /> : <Redirect to='/login' />
    )} />
  );

  const LoginPage = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = (e) => {
      e.preventDefault();
      // handle login logic here
      handleLogin();
    };

    return (
      <div>
        <h2>Login Page</h2>
        <form onSubmit={handleSubmit}>
          <div>
            <label>Username:</label>
            <input type='text' value={username} onChange={(e) => setUsername(e.target.value)} />
          </div>
          <div>
            <label>Password:</label>
            <input type='password' value={password} onChange={(e) => setPassword(e.target.value)} />
          </div>
          <button type='submit'>Login</button>
        </form>
      </div>
    );
  };

  const RegistrationPage = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');

    const handleSubmit = (e) => {
      e.preventDefault();
      // handle registration logic here
      handleLogin();
    };

    return (
      <div>
        <h2>Registration Page</h2>
        <form onSubmit={handleSubmit}>
          <div>
            <label>Username:</label>
            <input type='text' value={username} onChange={(e) => setUsername(e.target.value)} />
          </div>
          <div>
            <label>Password:</label>
            <input type='password' value={password} onChange={(e) => setPassword(e.target.value)} />
          </div>
          <div>
            <label>Confirm Password:</label>
            <input type='password' value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
          </div>
          <button type='submit'>Register</button>
        </form>
      </div>
    );
  };

  const HomePage = () => {
    return (
      <div>
        <h2>Home Page</h2>
        <button onClick={handleLogout}>Logout</button>
      </div>
    );
  };

  return (
    <Router>
      <div>
        <nav>
          <ul>
            {isLoggedIn ? (
              <li>
                <Link to='/'>Home</Link>
              </li>
            ) : null}
            <li>
              <Link to='/login'>Login</Link>
            </li>
            <li>
              <Link to='/register'>Register</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path='/login'>
            <LoginPage />
          </Route>
          <Route path='/register'>
            <RegistrationPage />
          </Route>
          <PrivateRoute path='/' component={HomePage} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

上面的代码定义了三个页面：登录页面、注册页面和主页。登录和注册页面都包含一个表单，用于输入用户名和密码（或确认密码）。当用户提交表单时，可以在 `handleSubmit` 函数中处理登录或注册逻辑，并根据结果设置 `isLoggedIn` 状态。主页只有在用户已登录时才能访问，否则将重定向到登录页面。

私有路由组件 `PrivateRoute` 可以将一个组件包装起来，以便只有在用户已登录时才渲染该组件。如果用户未登录，则将重定向到登录页面。在 `Switch` 中，我们可以使用 `PrivateRoute` 来保护主页组件，确保只有已登录用户才能访问。