React:将路径设置为登录页面

npm install react-router-dom

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

import LoginPage from './LoginPage';
import HomePage from './HomePage';

function App() {
  return (
    <Router>
      <Route path="/login" component={LoginPage} />
      <Route path="/home" component={HomePage} />
    </Router>
  );
}

export default App;

import React, { useState } from 'react';

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

  const handleLogin = () => {
    // 处理登录逻辑
  };

  return (
    <div>
      <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

export default LoginPage;

import React from 'react';

function HomePage() {
  return (
    <div>
      <h1>Welcome to the Home Page!</h1>
      {/* 显示用户登录后的内容 */}
    </div>
  );
}

export default HomePage;

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));