CODEWITHSUNDEEP
javascriptreactjsreact-router
CryBaby
CryBaby

Reputation: 47

Toggling State while using react router

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.

I have used HomeLocation as the toggle, such that whenever '/' is rendered the HomeLocation is set to true, an axios request is made to the api using the Geocoordinates, and if the HomeLocation is set to false, an axios request is made using the country name.

I am not sure if this is the correct way to do it any help would be appreciated.

import React from "react";
import "./App.css";
import Dashboard from "./components/Dashboard/Dashboard";
import { Route, Switch } from "react-router";
import SearchBar from "./components/Dashboard/Searchbar";
import NavBar from "./components/Dashboard/Navlink";
import Weekly from "./components/Weekly/WeeklyDashboard";

function getlocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    alert("Geolocation not supported");
  }
}
function showPosition(position) {
  console.log(position.coords.latitude);
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Location: "",
      HomeLocation: true,
      ResponseDetails: {
        City: "",
        Country: "",
        Geolocation: "",
      },
    };
  }

  componentWillMount() {
    if (this.state.HomeLocation === true) {
      console.log("Make request to open weather api using gps cordinates");
    } else {
      console.log(
        "Make request to open api using the country name provided by the user"
      );
    }
  }
  render() {
    return (
      <div className="Main">
        <div className="SearchGroup">
          <div>
            <SearchBar />
          </div>

          <div>
            <NavBar />
          </div>
        </div>
        <Switch>
          <Route path="/"  component={() => <Dashboard WeatherDetails={this.state.ResponseDetails} />} exact />
          <Route path="/:coutryname" component={() => <Dashboard WeatherDetails={this.state.ResponseDetails}/>} />/
        </Switch>
      </div>
    );
  }
}

export default App;

Upvotes: 1

Views: 104

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14201

You can use the react-router-dom withRouter so you can get access to objects such as location & history.

Basically on your componentWillMount just check if the location is equal to the home path which is "/" or a specified country provided by the user

import { Route, Switch, withRouter } from "react-router-dom";

class App extends React.Component {

    ...

    componentWillMount() {
        if (this.props.location.pathname === "/") {
            console.log("Make request to open weather api using gps coordinates");
        } else {
            console.log("Make request to open api using the country name provided by the user");
        }
    }

    ...
    
}

export default withRouter((props) => <App {...props} />);

CodeSandBox: https://codesandbox.io/s/dazzling-leaf-ps8ho?file=/src/App.js

As a side note, componentWillMount is deprecated. You might want to look into using componentDidMount instead

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

Furthermore, if you need to set the state when your route changes, you can do the route checking on componentDidUpdate

componentDidUpdate(prevProps, prevState) {

    /* check if previous route is different from current route (i.e., if redirected) */
    if (this.props.location.pathname !== prevProps.location.pathname) {
        // some logic such as performing axios requests & setting state
    }
}

Upvotes: 1

Related Questions