title: my react code is working but when i refresh the page i get TypeError: Cannot read property 'Location' of undefined
body: <p>Starting with GamePage, it provides 2 routes which renders the components GameList and GameDetailPage. Both work fine at first but When i refresh the page for Gamelist component, it still rerenders the page but when i refresh the page for GameDetailPage,  i get the error TypeError: Cannot read property 'Location' of undefined. I do not understand why it is unable to fetch data from state whenever i refresh.</p>
  
  <p>gamepage.jsx</p>
  
  <pre><code>import React from "react";
  import GamesList from "../../components/games-list/game-list.component";
  import { Route } from "react-router-dom";
  import GameDetailPage from "../gamedetailpage/gamedetailpage.component";
  import {firestore,convertCollectionsSnapshotToMap} from '../../firebase/firebase.utils'
  import {connect} from 'react-redux'
  import {updateFootballGames} from '../../redux/games/games.actions'
  
  class GamePage extends React.Component {
  
    unsubscribeFromSnapshot=null;
  
    //whenever the component mounts the state will be updated with the football games.
    componentDidMount(){
      const {updateFootballGames}=this.props
      const gameRef=firestore.collection('footballgames')
      gameRef.onSnapshot(async snapshot=&gt;{
        const collectionsMap=convertCollectionsSnapshotToMap(snapshot)
        updateFootballGames(collectionsMap)
      })
    }
    render() {
      const { match } = this.props;
      return (
        &lt;div className="game-page"&gt;
          &lt;h1&gt;games page&lt;/h1&gt;
          &lt;Route exact path={`${match.path}`} component={GamesList} /&gt;
          &lt;Route path={`${match.path}/:linkUrl`} component={GameDetailPage}
           /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps=state=&gt;({
    games:state.games.games
  })
  
  const mapDispatchToProps=dispatch=&gt;({
    updateFootballGames:collectionsMap=&gt;
    dispatch(updateFootballGames(collectionsMap))
  })
  
  export default connect(mapStateToProps, mapDispatchToProps)(GamePage);
  </code></pre>
  
  <p>gamedetailpage.component.jsx</p>
  
  <pre><code>  import React from "react";
      import { connect } from "react-redux";
      import GamePreview from '../../components/game-preview/game-preview.component'
      import GameDetails from '../../components/game-details/game-details.component'
  
  const GameDetailPage = (props) =&gt; {
      const {games, match} = props
      const urlparam =match.params.linkUrl
      // const games_array = Object.entries(games)
      const gameObj=games[urlparam]
      console.log('prop',gameObj)
  
  
      return (
        &lt;div className="game-list"&gt; 
            &lt;GameDetails game = {gameObj}/&gt;
        &lt;/div&gt;
  
      );
  
  };
  
  
  
  
  const mapStateToProps = (state) =&gt; ({
    games: state.games.games,
  });
  
  export default connect(mapStateToProps)(GameDetailPage);
  </code></pre>
  
  <p>game_details.component.jsx</p>
  
  <pre><code>import React from 'react';
  
  
  const GameDetails = (props) =&gt; {
      console.log(props.game.Location)
  
      return(
      &lt;div&gt;
      Location:{props.game.Location}
      &lt;br/&gt;
      Price:{props.game.Price}
      &lt;/div&gt;
  
      )
  }
  
  export default GameDetails;
  </code></pre>
  
  <p>gamelist.component.jsx</p>
  
  <pre><code>import React from "react";
  import './game-list.styles.scss'
  import GamePreview from "../game-preview/game-preview.component";
  import {connect} from 'react-redux'
  
  const GameList=(props)=&gt;{
      const {games}=props
      console.log(games)
      const game_list=Object.entries(games)
      console.log(game_list)
      return (
        &lt;div className="game-list"&gt;
          {game_list.map(game =&gt; 
                  &lt;GamePreview game = {game[1]}/&gt;)}
        &lt;/div&gt;
  
      );
    }
  
  const mapStateToProps=state=&gt;({
    games:state.games.games
  })
  
  export default connect(mapStateToProps)(GameList);
  </code></pre>
  
  <p>gamepreview.component.jsx</p>
  
  <pre><code>import React from "react";
  import "./game-preview.styles.scss";
  import { withRouter, Route } from "react-router-dom";
  
  
  import GamePreviewDetail from "../game-preview-detail/game-preview-detail.component";
  
  const GamePreview = (props) =&gt; {
    const { Location, Time, linkUrl, Price } = props.game;
    const { history, match } = props;
    return (
      &lt;div
        className="game-preview"
        onClick={() =&gt; history.push(`${match.url}/${linkUrl}`)}
      &gt;
        &lt;div className="game-preview-image"&gt;
          &lt;p&gt;Picture goes here&lt;/p&gt;
        &lt;/div&gt;
        {/* &lt;GamePreviewDetail name = {Location} price={Price}/&gt; */}
        &lt;p&gt;Location:{Location}&lt;/p&gt;
        &lt;p&gt;Price:{Price}&lt;/p&gt;
      &lt;/div&gt;
    );
  };
  
  export default withRouter(GamePreview);
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>import React from 'react';
  import './App.css';
  //import dependencies
  import { Route, Switch } from "react-router-dom";
  //import pages
  import HomePage from './pages/homepage/homepage'
  import GamesPage from './pages/gamespage/gamespage'
  import SignInSignUp from './pages/signin-signup-page/signin-signup-page'
  
  import GameDetailPage from "./pages/gamedetailpage/gamedetailpage.component";
  
  import Header from './components/header/header.component';
  
  import { auth, createUserProfileDocument } from './firebase/firebase.utils';
  
  class App extends React.Component{
    constructor() {
      super();
  
      this.state = {
        currentUser: null
      } 
    }
  
    unsubscribeFromAuth = null
  
    componentDidMount() {
    this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth =&gt; {
      if (userAuth) {
        const userRef = await createUserProfileDocument(userAuth);
        // check if the snapshot has changed (subscribe)
        // get the user that we just created or that already exists in the db
        userRef.onSnapshot(snapshot =&gt; {
          this.setState({
            currentUser: {
              id: snapshot.id,
              ...snapshot.data()}
          })
        })  
      } else {
        this.setState({currentUser: userAuth})
      }
  
      })
    }
  
    componentWillUnmount() {
      this.unsubscribeFromAuth();
    }
  
    render(){
      return(
        &lt;div&gt;
          &lt;Header currentUser = {this.state.currentUser}/&gt;
           &lt;Switch&gt;
            &lt;Route exact path="/" component={HomePage} /&gt;  
            &lt;Route path="/games" component={GamesPage} /&gt;  
            &lt;Route exact path="/signin" component={SignInSignUp} /&gt;  
          &lt;/Switch&gt;
        &lt;/div&gt;
      )
    }
  }
  export default App;
  </code></pre>