useLocation() and useHistory() do not change, always have the same values
Tags: react, reactr
Published: 2022-08-18 08:02:00

I am using "react-router": "^5.1.0", "react-router-dom": "5.1.0". Login component gets loaded but the history and location object do not change always remain the same, after the redirect or if you load any other component.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sj5v0ikpltxooxpkwugm.png)

```
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;
```

This is the Login Component.

```
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;
```
when the application loads Login component is rendered then onclick OKTA is used to authenticate the user and redirects to "localhost:8080/?redirect_url=/login/callback" hence in login (use effects) I am redirecting to dashboard when authentication is successful. But some reason location object is not changing