我现在正在创建一个基本的登录页面,而且我是 react 的新手。到目前为止,由于我没有登录,该页面已成功将我重定向到“/登录”页面。登录后,我得到了一个“以访客身份登录”的 console.log,这是我现在想要的,但是,我不要被重定向到主页。有人可以帮我弄这个吗?
相关代码在返回调用之后,但我将其全部留在那里以供上下文
非常感谢!
import Intro from './components/Intro';
import SignIn from './components/SignIn';
import Home from './components/Home';
import { BrowserRouter as Router, Route, Routes, Navigate, useParams, useNavigate } 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={user.username !== "" ? <Navigate to ="/Home" /> :
<Navigate to ="/Login"/>}/>
</Routes>
</Router>
</div>
);
}
export default App;
回答1
在您的登录功能中,成功登录后您不会导航到您的主页...
import Intro from './components/Intro';
import SignIn from './components/SignIn';
import Home from './components/Home';
import { BrowserRouter as Router, Route, Routes, Navigate, useParams, useNavigate } 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,
});
<Navigate to ="/Home"/>}/>
} 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={user.username !== "" ? <Navigate to ="/Home" /> :
<Navigate to ="/Login"/>}/>
</Routes>
</Router>
</div>
);
}
export default App;
这将起作用