javascript - 登录后页面未使用 window.href 加载,但在我登录前转到 url 时加载
问题描述
我试图在登录完成后重定向用户,所以我window.location
在我的 Login.js 中使用了重定向到Home.js
. 但是,成功登录后,页面重定向到 url 但不加载页面。但是,如果我在登录前手动尝试访问该页面,则该页面会成功加载。
index.js:
import ReactDOM from 'react-dom';
import './index.css';
import Login from './Login'
import Home from './Home'
import {Route, BrowserRouter, Switch} from 'react-router-dom'
import {GlobalProvider} from './globalContext'
function Router(){
return (
<React.StrictMode>
<BrowserRouter>
<GlobalProvider>
<BrowserRouter>
<Route exact path ='/success' component={Home}/>
<Route exact path ='/' component={Login}/>
</BrowserRouter>
</GlobalProvider>
</BrowserRouter>
</React.StrictMode>
)
}
ReactDOM.render(
<Router/>,
document.getElementById('root')
);
登录.js:
import React, {useState, useContext, useEffect, setTimeout} from 'react';
import {login, returnCredentials} from './auth';
import { GlobalContext } from './globalContext';
var hasLoginned = false;
export default function Auth(){
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const {tokenValue} = useContext(GlobalContext);
const [token, setToken] = tokenValue
useEffect(()=>{
if(hasLoginned){
console.log("token=",token);
if(token){
window.location = 'https://localhost:3000/succes'
}
};
}, [token])
const loginClicked = () => {
login(username, password) // stores JSON object with access and refresh tokens.
var credentials = returnCredentials()
hasLoginned = true
window.setTimeout(function(){
console.log("credentials: ",credentials, "it has type of ", typeof(credentials))
console.log(credentials[0])
setToken(credentials[0])
},2000)
}
return (
<div>
<label htmlFor="username">Username</label>
<input id="username" type="text" placeholder="username" value={username}
onChange={evt => setUsername(evt.target.value)}/>
<br/>
<label htmlFor="password">Password</label>
<input id="password" type="password" placeholder="password" value={password}
onChange={evt => setPassword(evt.target.value)}/>
<br/>
<button onClick={loginClicked}>Login</button>
</div>
)
}
主页.js:
export default function Home(){
return (<div>Hello there!</div>)
}
我应该怎么办?
解决方案
用这个
window.location.href = 'https://localhost:3000/succes'
或者
import { Redirect } from 'react-router-dom'
<Redirect to='/succes' />
推荐阅读
- terraform - Terraform 替换正则表达式
- java - 在 Java 中的 Selenium 中选择所选 web 元素上方的 div
- python-3.x - 在 Python 3 中使用 solenium 获取匹配表信息
- python - 如何使用 Python 在 GNOME 中将按钮添加到通知托盘
- date - 在 Tableau 中,有没有办法使用日期过滤器在表输出中仅显示第一个和最后一个日期
- c# - OnMessageReceived 等效于应用程序关闭/在后台发送的通知
- parcelable - 当 minifyEnabled true 时 Parcelable / Parceler 出错
- flutter - 在颤动中增加对话框的宽度的问题
- mysql - 我需要帮助打破这个查询
- mysql - 是否可以在 10.2.31-MariaDB-log 中创建递归函数?如果不是,有什么替代方案?