This is JavaScript code and this works perfectly but the problem is I can't understand how this works. If anyone knows how this works please explain it to me.
This is the query = ?cid=619386618c57a571f4463d45&type=page
export default (query) => {
if(query){
const queryString = query.split("?")[1];
if(queryString.length > 0){
const params = queryString.split("&");
const paramObj = {};
params.forEach(param => {
const keyValue = param.split("=");
paramObj[keyValue[0]] = keyValue[1];
});
return paramObj;
}
}
return {};
}
There is almost zero React here. It is quite plain JavaScript
export default (query) => { // this is the only react here
if(query){ // if there is a string
const queryString = query.split("?")[1]; // get the stuff after the ?
if(queryString.length > 0){ // if there was stuff after the ?
const params = queryString.split("&"); // split on & (gives an array)
const paramObj = {}; // create an object
params.forEach(param => { // for each part of the split array
const keyValue = param.split("="); // split on the =
paramObj[keyValue[0]] = keyValue[1]; // use the string before the = as key and after as value
});
return paramObj; // return the object
}
}
return {}; // otherwise return empty object
}
The whole thing can be written
export default (query) => {
let urlParams = new URLSearchParams(query);
const result = {};
for (const [key, value] of urlParams.entries()) {
result[key] = value;
}
return result;
}
Test:
const getParams = query => {
let urlParams = new URLSearchParams(query);
const result = {}
for (const [key, value] of urlParams.entries()) { // each 'entry' is a [key, value] tupple
result[key] = value;
}
return result;
}
console.log(getParams("?cid=619386618c57a571f4463d45&type=page"))