History, Location & Match in React Summarized Like Crazy

#react #webdev

Hello React devs! This is a very short article that covers these 3 important props, so be assured that I'll not elaborate more than needed and bore the he*k out of you.

History, location, and match are 3 props that each screen component gets. If you're confused, in simple words, it all happens because of React Router DOM. Take a look at the following code snippet.

import { BrowserRouter as Router, Route } from "react-router-dom";
// all import statements go here like StudentScreen, etc.

function App() {
  return (

    <Router>
      <Route path="/login" component={LoginScreen} />
      <Route path="/register" component={RegisterScreen} />
      <Route path="/student/:id?" component={StudentScreen} />
      <Route exact path="/" component={Home} />
    </Router>
  );
}

export default App;

These 4 components (LoginScreen, RegisterScreen, StudentScreen, Home) receive history, location, and match props automatically because they're associated with a route. So, in these components, you may destructure these 3 props.

History?

Pretty much means the URL. One method in history object is .push() which redirects you to another URL. For example, initially you might be in localhost:3000 (HomeScreen). Then when the user clicks a button, they need to be redirected to LoginScreen, so we can write something like history.push("/login") to bring the user there. Why didn't I write history.push("/loginscreen") instead? The reason is in the first, initial code snippet at the beginning of this article, I've REGISTERED "/login" as the route which will render LoginScreen component. Here's the code equivalent:

function Home({ history, location, match }) {
  // we're initially in localhost:3000

  const handleClick = () => {
    history.push("/login"); // now we're in localhost:3000/login
  };

  return (
    <div>
      <Button onClick={handleClick}>
        Click me to go to login page! 
      </Button>
    </div>
  );
}

export default Home;

Location?

Location object has a bunch of stuffs, but the most commonly used is the search property inside location object. It pretty much means the URL too, but specifically the query string parameter. Sometimes, when you redirect a user to another screen, you'd send additional data as well, for example, history.push("/addToCart?quantity=99"). Here, we're redirecting the user to add to cart screen but supplying additional data as query string parameters. location.search is the question mark and everything after it, in this case ?quantity=99. Here's an example of code you'd might write:

function CartScreen({ history, location, match }) {
  // assume location.search is ?quantity=99
  const productQuantity = location.search ? 
  parseInt(location.search.split("=")[1])) : 1; 
  // Code translated in English: 
  // If there exists location.search,
  // split the URL to two by the equal sign, and then 
  // take the 2nd slice (index = 1) and
  // turn that into a number. Otherwise,
  // make quantity as 1 by default.
}

Match?

Has a bunch of stuffs, but usually the property you want to use in match is the params property, which contains all the parameters in URL. For example, you might be in localhost:3000/student/student0098. In this case the path is /student but after that, we've got an id named student0098. Why is it named "id"? That's because the route is set that way:

function App() {
  return (

    <Router>
      <Route path="/login" component={LoginScreen} />
      <Route path="/register" component={RegisterScreen} />
      <Route path="/student/:id?" component={StudentScreen} />
      <Route exact path="/" component={Home} />
    </Router>
  );
}

See? As you might have guessed, the id would change for each student. So, a good case would be to grab the id from the URL and display it in the navigation bar, or anything else you want to do with it. Anyway, here's how to access the id.

function StudentScreen({ history, location, match }) {
  const theStudentId = match.params.id;

  // now place theStudentId in navigation bar or do anything you 
  // want with it.
}