How to parse query string in react-router v4

Question

In react-router v3 I could access it with props.location.query.foo (if the current location was ?foo=bar)

In react-router-dom@4.0.0

Answer 1

instead of installing a package you can use a simple function for extracting your query params.

//Param Extractor
const parseParams = (params = "") => {
  const rawParams = params.replace("?", "").split("&");
  const extractedParams = {};
  rawParams.forEach((item) => {
    item = item.split("=");
    extractedParams[item[0]] = item[1];
  });
  return extractedParams;
};

//Usage
const params = parseParams(this.props?.location?.search); // returns an object like:
// {id:1,name:john...}