登录后使用 window.href 页面不加载，但在登录前转到 url 时加载

Question

我试图在登录完成后重定向用户，所以我在 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>)
}

我该怎么办？

Answer 1

使用这个

window.location.href =  'https://localhost:3000/succes'

或

import  { Redirect } from 'react-router-dom'

<Redirect to='/succes'  />

Answer 2

而不是使用 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

登录后使用 window.href 页面不加载，但在登录前转到 url 时加载

Page does not load using window.href after login but loads when i go to url before login

javascript

reactjs

react-router

window.location

location-href