问如果未登录，则响应路由器重定向

EN

import SignIn from './components/SignIn';
import Home from './components/Home';
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import './App.css';
import { useState, useEffect } from 'react';


function App() {

  const guestUser = {
    username: "guest",
    password: "guest",
  }

  const [user, setUser] = useState({username: "", password: ""})
  const [error, setError] = useState("");
  

  const Login = details => {
      console.log(details);
      if(details.username == guestUser.username && details.password == guestUser.password) {
        console.log("Logged in as guest");
        setUser({
          username: details.username,
          
        })
      } else {
        console.log("details do not match");
        setError("Details do not match.")

      }
  }

  const Logout = () => {
      console.log("logout");
  }



  return (

    <div className="App">
      
      <Router>
        <Routes>
          
          <Route path="/Login" element={<Intro Login={Login} Logout={Logout} error={error}/>} />
          <Route path="/Home" element={<Home user={user}/>}/>
          <Route path="" element={<Home user={user}/>}/>
          
          
          
      
      
          {(user.username !== "") ? ( <Route element={<Navigate to="/Home"/>}/>
          ) : (
            <Route element={<Navigate to="/Login"/>}/>
            
            
          )}
        </Routes>

      </Router>
        
    </div>
     
 
    
  );
}

export default App;