title: Toggling State while using react router
body: <p>By default, I want to show the temperature of the current gps location. But if the user wishes to see the temperature of  any other specific country  he can do so by providing the country name.</p>
  <p>I have used HomeLocation as the toggle, such that whenever '/' is rendered the HomeLocation is set to <code>true</code>, an axios request is made to the api using the Geocoordinates, and if the HomeLocation is set to <code>false</code>, an axios request is made using the country name.</p>
  <p>I am not sure if this is the correct way to do it any help would be appreciated.</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./App.css&quot;;
  import Dashboard from &quot;./components/Dashboard/Dashboard&quot;;
  import { Route, Switch } from &quot;react-router&quot;;
  import SearchBar from &quot;./components/Dashboard/Searchbar&quot;;
  import NavBar from &quot;./components/Dashboard/Navlink&quot;;
  import Weekly from &quot;./components/Weekly/WeeklyDashboard&quot;;
  
  function getlocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      alert(&quot;Geolocation not supported&quot;);
    }
  }
  function showPosition(position) {
    console.log(position.coords.latitude);
  }
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        Location: &quot;&quot;,
        HomeLocation: true,
        ResponseDetails: {
          City: &quot;&quot;,
          Country: &quot;&quot;,
          Geolocation: &quot;&quot;,
        },
      };
    }
  
    componentWillMount() {
      if (this.state.HomeLocation === true) {
        console.log(&quot;Make request to open weather api using gps cordinates&quot;);
      } else {
        console.log(
          &quot;Make request to open api using the country name provided by the user&quot;
        );
      }
    }
    render() {
      return (
        &lt;div className=&quot;Main&quot;&gt;
          &lt;div className=&quot;SearchGroup&quot;&gt;
            &lt;div&gt;
              &lt;SearchBar /&gt;
            &lt;/div&gt;
  
            &lt;div&gt;
              &lt;NavBar /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;Switch&gt;
            &lt;Route path=&quot;/&quot;  component={() =&gt; &lt;Dashboard WeatherDetails={this.state.ResponseDetails} /&gt;} exact /&gt;
            &lt;Route path=&quot;/:coutryname&quot; component={() =&gt; &lt;Dashboard WeatherDetails={this.state.ResponseDetails}/&gt;} /&gt;/
          &lt;/Switch&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>