React:当用户名和密码正确时，如何创建只能从登录屏幕访问的隐藏页面？

// App.js

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import LoginPage from './LoginPage';
import HiddenPage from './HiddenPage';

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <Router>
      <Route exact path="/">
        {isAuthenticated ? (
          <Redirect to="/hidden" />
        ) : (
          <LoginPage setIsAuthenticated={setIsAuthenticated} />
        )}
      </Route>
      <Route exact path="/hidden">
        {isAuthenticated ? <HiddenPage /> : <Redirect to="/" />}
      </Route>
    </Router>
  );
}

export default App;

// LoginPage.js

import React, { useState } from 'react';

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

  const handleFormSubmit = (e) => {
    e.preventDefault();
    
    // 进行用户名和密码的验证逻辑
    const isValid = validateCredentials(username, password);
    
    if (isValid) {
      setIsAuthenticated(true);
    } else {
      // 处理验证失败的情况，例如显示错误消息
      console.log("用户名或密码错误");
    }
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <input
        type="text"
        placeholder="用户名"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="密码"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">登录</button>
    </form>
  );
};

export default LoginPage;

// HiddenPage.js

import React from 'react';

const HiddenPage = () => {
  return <h1>这是隐藏页面，只能从登录屏幕访问</h1>;
};

export default HiddenPage;