title: useLocation hook undefined on startup: TypeError: Cannot read property 'location' of undefined
body: <p>I am writing a typescript React application that will log a user in and update the <code>Dashboard</code> component to display the user information, such as their access tokens and their name. I am using the <code>useLocation</code> hook to pass the state from the fetch request in the <code>LoginCallback</code> component to display it in the Dashboard component.</p>
  <p>The problem I am having is that on startup the Dashboard component won't render as the state is undefined because it hasn't been passed by the <code>LoginCallback</code> component yet, giving me a <code>TypeError: Cannot read property 'location' of undefined</code>.</p>
  <p>I'm wondering if there is a way of assigning a default value for the <code>state.authenticated</code> value, any help would be greatly appreciated! The code for the components are below:</p>
  <p>Index.tsx:</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';
  import 'bootstrap/dist/css/bootstrap.css';
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
        &lt;App /&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  
  reportWebVitals();
  </code></pre>
  <p>App.tsx:</p>
  <pre><code>import React, {useState} from 'react';
  import './App.css';
  import {Navbar, Button} from 'react-bootstrap';
  import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
  import LoginCallback from './components/LoginCallback';
  import Dashboard from './components/Dashboard';
  
  function App() {
    const [name, setName] = useState('');
  
    return (
      &lt;div&gt;
        &lt;Navbar className='bg-dark'&gt;
            &lt;Navbar.Brand className='text-white' href=&quot;#home&quot;&gt;
            &lt;img
              src={process.env.PUBLIC_URL+&quot;/AgileInventoryLogo.png&quot;}
              width=&quot;159&quot;
              height=&quot;50&quot;
              className=&quot;d-inline-block align-top&quot;
              alt=&quot;React Bootstrap logo&quot;
            /&gt;
            &lt;/Navbar.Brand&gt;
          &lt;Navbar.Toggle /&gt;
          &lt;Navbar.Collapse className=&quot;justify-content-end&quot;&gt;
          {name !== 'null' ?
            &lt;Navbar.Text  className='text-white'&gt;Not signed in: &lt;Button  className='text-white' href='/login' variant=&quot;outline-info&quot;&gt;Sign In&lt;/Button&gt;&lt;/Navbar.Text&gt; :
            &lt;Navbar.Text  className='text-white'&gt;Signed in as: &lt;a  className='text-white' href=&quot;#login&quot;&gt;Mark Otto&lt;/a&gt;&lt;/Navbar.Text&gt; }
          &lt;/Navbar.Collapse&gt;
        &lt;/Navbar&gt;
        &lt;Router&gt;
          &lt;Switch&gt;
            &lt;Route path=&quot;/login&quot; component={() =&gt; { window.location.href = 'http://localhost:9090/oauth/authorize?response_type=code&amp;client_id=client2&amp;scope=read'; return null; }} /&gt;
            &lt;Route path=&quot;/oauth_callback&quot; component={LoginCallback} /&gt;
            &lt;Route path=&quot;/dashboard&quot; exact component={Dashboard} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
        &lt;Dashboard/&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  <p>Dashboard.js:</p>
  <pre><code>import React from 'react';
  import {useLocation} from 'react-router-dom';
  
  const Dashboard = () =&gt; {
      const {state} = useLocation();
      // COULD USE REDUX TO STORE USER INFO ACROSS COMPONENTS
      return (
          &lt;div&gt;
              &lt;p&gt; Dashboard &lt;/p&gt;
              { state.authenticated ?
                  &lt;div&gt;
                      &lt;p&gt;Authenticated&lt;/p&gt;
                      &lt;p&gt; stored access token: {state.access_token} &lt;/p&gt;
                      &lt;p&gt; refresh token: {state.refresh_token}&lt;/p&gt;
                      &lt;p&gt; user: {state.user.user_name}&lt;/p&gt;
                  &lt;/div&gt;
                              :
                  &lt;p&gt;Not Authenticated&lt;/p&gt;
              }
          &lt;/div&gt;
      );
  }
  
  export default Dashboard;
  </code></pre>
  <p>LoginCallback.tsx:</p>
  <pre><code>import React, { FC, useEffect } from &quot;react&quot;;
  import { RouteComponentProps, useHistory } from &quot;react-router-dom&quot;;
  import jwt_decode from &quot;jwt-decode&quot;;
  
  const LoginCallback: FC&lt;RouteComponentProps&gt; = ({ location }) =&gt; {
    const history = useHistory();
  
    useEffect(() =&gt; {
      const code = (location.search.match(/code=([^&amp;]+)/) || [])[1];
      const qParams = [
        `grant_type=authorization_code`,
        `scope=read`,
        `code=${code}`
      ].join(&quot;&amp;&quot;);
      fetch(`http://localhost:9090/oauth/token?${qParams}`, {
      // credentials: &quot;include&quot;,
      method: 'POST',
      headers: {
        'Authorization': 'Basic Y2xpZW50MjpzZWNyZXQy'
      }})
      .then(res =&gt; res.json())
      .then(response =&gt; {
        var decode = jwt_decode(response.access_token);
        history.push({pathname: '/', state: {
          authenticated: true,
          user: decode,
          access_token: response.access_token,
          token_type: response.token_type,
          refresh_token: response.refresh_token,
          expires_in: response.expires_in,
          scope: response.scope
        }});
        console.log(response);
      })
      .catch(console.error);
    }, []);
    return null;
  };
  
  export default LoginCallback;
  </code></pre>