How to Get Parameter Value from Query String
Query strings are widely used to retrieve information from the URL of pages. Then, it can be accessed for further functioning of the web application functionalities. It is a part of the URL or full query.
It allows sending information using parameters as the key-value pairs. In other words, a query string is a piece of information sent to the server appended to the end of the page URL. It means that a query string is a way to transfer information from one page to another via URL.
The query string is often attached to the URL with “?”. It is easy to use and does not require any server resources. Almost all browsers support Query String. You do not need to put extra effort into code. If you need to make the best use of the Query String in your project, you can seek professional help.
Are you thinking about how to get parameter values from Query String? If yes, then read this blog completely. In case you do not have any idea about getting parameter values from Query String, you can hire react developer from Bosc Tech Labs.
Ways to get parameter value from the query string
Here are the three methods to follow to get parameter value from the query string.
- You can use a regular expression to get the query string
- Utilize the browser api.image the current URL, like this:
http://www.google.com.au?token =123
To get 123;
const query = new URLSearchParams(this.props.location.search);
const token = query.get(‘token’)
console.log(token)//123
- You can use the third library called query-string
For that, you have to install the library using the command “npm i query-string.” Then, import it to the current js file through this command “import queryString from ‘query-string.'” Next, you need to get a ‘token’ in the current URL by doing the following.
const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log(‘token’,token)//123\
Example:
If the current URL like “http://www.google.com.au?app=home&act=article&aid=160990, define the function to get the parameters.
functiongetQueryVariable(variable)
{
var query = window.location.search.substring(1);
console.log(query)//”app=article&act=news_content&aid=160990”
varvars = query.split(“&”);
console.log(vars) //[ ‘app=article’, ‘act=news_content’, ‘aid=160990’ ]
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split(“=”);
console.log(pair)//[ ‘app’, ‘article’ ][ ‘act’, ‘news_content’ ][ ‘aid’, ‘160990’ ]
if(pair[0] == variable){return pair[1];}
}
return(false);
}
Now, you can get “aid” by: getQueryVariable(‘aid’) //160990
To obtain parameter value from query string with React Router
You have to use the “useLocation” hook to get parameter value from the query string with React Router. Here is how to do it!
import React from “react”;
import { useLocation } from “react-router-dom”;
constMyComponent = () => {
const { search } = useLocation();
const id = new URLSearchParams(search).get(“id”);
console.log(id);
//…
};
useLocation hook is used to get the URL data properly. Then, you get the query string from the “search” property. Next, it passes in Search to URLSearchParams. So, you will get the value of the “id” query parameter with get.
Here, URLSearchParams API is built into all the browsers and renders you utility methods for dealing with the query strings. If you create the new instance of URLSearchParams, you need to pass it a query string and then get back the object with the bunch of methods working with that query string.
To obtain parameter value from query string without react router in reactjs app
If you do not want to use the react router to get the parameter value from the query string, you can work in react js app. For that, you need to use this.props.location.search. Here are the steps to follow to get URL parameter values without a react router in the react js app.
- Create react app
Open your terminal and then execute the following common on the terminal to create the new react app.
npx create-react-app my-react-app
You should execute the following command on your terminal to run the React app.
npm start
You can check out your React app on the URL: localhost:3000
- Install query string and bootstrap 4 package
Next, you should execute the command below to install the query string and bootstrap 4 library into your react app.
npm install bootstrap –save
npm install query-string
After that, you need to add the react router and boostrap.min.css file in src/App.js file.
import React from ‘react’;
import ‘../node_modules/bootstrap/dist/css/bootstrap.min.css’;
import { BrowserRouter as Router, Switch, Route } from ‘react-router-dom’;
function App() {
return (
<div>
<h2>How to Get Parameter in URL in React js with Router</h2>
</div>
);
}
export default App;
- Create home component
Visit the src directory of your react js app and create the home component named Home.js. Then, you need to add the following code to it.
import React from ‘react’
importqueryString from ‘query-string’
class Home extends React.Component{
state = {
site: ‘unknown’,
subject: ‘i dont know
}
handleQueryString = () => {
// Parsing the query string
// Using parse method
let queries = queryString.parse(this.props.location.search)
console.log(queries)
this.setState(queries)
}
render() {
return (
<div style={{ margin: 200 }}>
<p>WebSite: {this.state.site} </p>
<p> Subject: {this.state.subject} </p>
<button
onClick={this.handleQueryString}
className=’btnbtn-primary’>
click me </button>
</div>
);
}
}
export default Home;
Assume that you have the Url http://localhost:3000/?site=tutsmake&subject=get-query-string that can display onto react js application. Therefore, when you click the button, you will obtain the query string parameter on your react js app.
- Add component in app.js
Now, it is time to add Home.js file in src/App.js file. Here is how to add the component in react js.
import React from ‘react’;
import ‘../node_modules/bootstrap/dist/css/bootstrap.min.css’;
iimportqueryString from ‘query-string’
import Home from ‘./Home’
function App() {
return (
<div className=”App”>
<Home />
</div>
);
}
export default App;
Conclusion
So, you will understand the significant ways to get parameter values from the query string. You can use any one of these methods. Or else, you can hire react developer because the developer has more experience and skills in this aspect.
React developers think out of the box when handling the project. So, you will expect the best assistance for your query or project. Remember that you can freely speak about your needs with the developer and get the right solution. Using their expertise, they will showcase all the possible ways to achieve your requirements.