如果未登录，则响应路由器重定向
如果未登录，则响应路由器重定向
提问于 2022-05-19 08:51:35
我想打开页面，如果我没有登录，我希望它立即将我重定向到一个注册页面。当我打开应用程序时，即使没有登录，我也不会被重定向，我会被发送到主页，主页上写着欢迎空白，它应该说欢迎user.username (不管这个值被设置为什么)，那么为什么if语句不起作用呢?我是一个新的反应路由器，所以如果感谢的话，任何帮助都可以。登录确实有效，通过更改状态，我可以获得所需的结果，但我希望url也能更改。
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;回答 2
Stack Overflow用户
发布于 2022-05-19 09:37:31
我认为将代码设置为：
{user.username ? ( <Route element={<Navigate to="/Home"/>}/>
) : (
<Route element={<Navigate to="/Login"/>}/>
)}也许能帮上忙。
如果user.username是false，它将重定向到Login，如果字符串的内容类似于"x“，它将返回true并返回。
编辑:打字
Stack Overflow用户
发布于 2022-05-20 08:43:53
我解决了。现在，通过将if语句逻辑放入路由的元素部分，用户将自动被重定向到主页。在此之后，我遇到了一个问题:尽管控制台日志确认我已登录，但登录后不会被重定向。这是因为我没有在后面放导航功能。
为了使它看起来更干净，我将标记放在index.js文件中而不是app.js文件中(文件显示在下面)，这样所有子组件都可以访问路由。
另外，如果我刷新页面，我的登录信息丢失了，技术上我又签了名，但我已经找到了一个教程，其中说您需要使用useEffect将这些状态变量存储在本地存储中，这样浏览器就会记住尽管刷新了您，还是会在其中签名，所以这将是下一步。
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 navigate = useNavigate()
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('/Home')
} else {
console.log("details do not match");
setError("Details do not match.")
}
}
const Logout = () => {
console.log("logout");
}
return (
<div className="App">
<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>
</div>
);
}
export default App;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72301456
复制相关文章
相似问题
腾讯云开发者
