useLocation() a useHistory() se nemění, mají vždy stejné hodnoty

Používám "react-router":"^5.1.0", "react-router-dom":"5.1.0". Přihlašovací komponenta se načte, ale objekt historie a umístění se nezmění, vždy zůstanou stejné, po přesměrování nebo pokud načtete jakoukoli jinou komponentu.


import React from "react";
import { ThemeProvider } from "styled-components";
import { theme } from "./theme-default";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import { GlobalStyle } from "./themes";
import { Security } from '@okta/okta-react';
import { OktaAuth } from "@okta/okta-auth-js";

import { FeeSitePageHeader } from "./app/fee--site-page-header";
import { FeeSitePageFooter } from "./app/fee-site-page-footer";

import Dashboard from "./app/Dashboard/Dashboard";
import Logout from "./app/Logout/Logout";
import Login from "./app/Login/Login";

function App() {
  const config = {
    issuer: 'https://dev-95779092.okta.com/', 
    clientId: '****',
    redirectUri: window.location.origin + '/?redirect_url=/login/callback'
  };

  const authClient = new OktaAuth(config); 

  function restoreOriginalUri()  {
    console.log(restoreOriginalUri);
  };

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Router >
      <Security oktaAuth={authClient}  restoreOriginalUri={restoreOriginalUri}>
      <FeeSitePageHeader />
        <Switch>
        <Route path="/" exact component={Login} />
        <Route path="/dashboard"  component={Dashboard}/>
        <Route path="/logout"  component={Logout}/>
        </Switch>
      <FeeSitePageFooter />
      </Security>
      </Router>
     </ThemeProvider>
  );
}

export default App;

Toto je přihlašovací komponenta.

import React from 'react';
import { useOktaAuth } from '@okta/okta-react';
import {TextInput,Field, Checkbox} from "./atom";
import { useLocation } from 'react-router';
import { useHistory } from 'react-router';

import * as Styled from "./Login.styled";

function Login(){
    const { authState, oktaAuth } = useOktaAuth();

    const location = useLocation();
    const history = useHistory();
    const [username, setUsername]=React.useState("");
    const [password, setPassword]=React.useState("");

    console.log(location);
    console.log(history);

    React.useEffect(() => {
      console.log("React UseEffects");
        if (history.location.search?.includes('redirect_url=/login/callback')) {
          history.push('/#/dashboard');
        }
    }, [history,location])

    function handleFormSubmission(){
        oktaAuth.signInWithRedirect();
        console.log(oktaAuth,authState);
      }

      function chgUsername(e:any){
        setUsername(e.target.value);
      }

      function chgPassword(e:any){
        setPassword(e.target.value);
      }

    return(
        <Styled.LoginFormWrapper>
        <Styled.Title>
          </Styled.Title>
            <Styled.FieldWrapper>
              <Field >
                {props => (
                  <TextInput
                    name="username"
                    size={27}
                    placeholder="username"
                    value={username}
                    onChange={chgUsername}
                  />
                )}
              </Field>
            </Styled.FieldWrapper>

            <Styled.FieldWrapper>
              <Field >
                {props => (
                  <TextInput
                    name="password"
                    size={27}
                    placeholder="Password"
                    type="password"
                    value={password}
                    onChange={chgPassword}
                  />
                )}
              </Field>
            </Styled.FieldWrapper>

            <Styled.RememberMe>
                <Checkbox
                  label="Remember me"
                  title="Remember me"
                />
            </Styled.RememberMe>

            <Styled.LoginButton
              onClick={handleFormSubmission}
              data-testid="login-form-login-btn" >
              Log In
            </Styled.LoginButton>

          </Styled.LoginFormWrapper>  

    );
}

export default Login;

když se aplikace načte Přihlašovací komponenta je vykreslena, pak se onclick OKTA použije k ověření uživatele a přesměruje na "localhost:8080/?redirect_url=/login/callback", takže v přihlášení (použití efektů) přesměruji na řídicí panel, když je ověření úspěšné. Ale z nějakého důvodu se objekt umístění nemění