登录后使用 window.href 页面不加载,但在登录前转到 url 时加载
Page does not load using window.href after login but loads when i go to url before login
我试图在登录完成后重定向用户,所以我在 Login.js 中使用 window.location
重定向到 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')
);
Login.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>
)
}
Home.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' />
而不是使用 window.location ,
使用来自 react-router-dom.
的 useHistory
import { useHistory } from "react-router-dom";
let history = useHistory();
history.push("/success")
Link 你可以参考:https://reactrouter.com/web/api/Hooks
我试图在登录完成后重定向用户,所以我在 Login.js 中使用 window.location
重定向到 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')
);
Login.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>
)
}
Home.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' />
而不是使用 window.location , 使用来自 react-router-dom.
的useHistory
import { useHistory } from "react-router-dom";
let history = useHistory();
history.push("/success")
Link 你可以参考:https://reactrouter.com/web/api/Hooks