React의 쿼리 문자열에서 매개 변수 값을 얻는 방법은 무엇입니까?

쿼리 문자열은 페이지의 URL에서 정보를 검색하는 데 널리 사용됩니다. 그런 다음 추가 기능 웹 애플리케이션 기능을 위해 액세스할 수 있으며 URL 또는 전체 쿼리의 일부입니다.

매개변수를 키-값 쌍으로 사용하여 정보를 보낼 수 있습니다. 즉, 쿼리 문자열은 페이지 URL 끝에 추가되어 서버로 전송되는 정보입니다. 쿼리 문자열은 URL을 통해 한 페이지에서 다른 페이지로 정보를 전송하는 방법입니다.

쿼리 문자열은 종종 "?"로 URL에 연결됩니다. 사용하기 쉽고 서버 리소스가 필요하지 않습니다. 거의 모든 브라우저는 쿼리 문자열을 지원합니다. 코드에 추가 노력을 기울일 필요가 없습니다.

쿼리 문자열에서 매개변수 값을 가져오는 방법이 막히나요? 그렇다면 이 블로그를 철저히 읽으십시오. 또는 React 개발에 기술 지원이 필요하십니까? 복잡한 애플리케이션 개발 경험이 풍부한 Bosc Tech Labs의 ReactJS 개발자를 고용하십시오.

쿼리 문자열에서 매개변수 값을 가져오는 방법
다음은 쿼리 문자열에서 매개 변수 값을 가져오기 위해 따라야 하는 세 가지 방법입니다.

1. 정규식을 사용하여 쿼리 문자열을 가져올 수 있습니다.

import React from "react";
import { useLocation } from "react-router-dom";
const MyComponent = () => {
  const { language } = useLocation();
  const name = new URLSearchParams(language).get("name");
  console.log(name);
};

2. React Router를 사용하여 쿼리 문자열에서 매개 변수 값을 얻으려면

React Router를 사용하여 쿼리 문자열에서 매개 변수 값을 가져오려면 "useLocation"후크를 사용해야 합니다. 방법은 다음과 같습니다! 또한 React 후크를 최대한 활용하기 위해 따라야 하는 지침을 확인하세요.

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 후크는 URL 데이터를 올바르게 가져오는 데 사용됩니다. 그런 다음 "search"속성에서 쿼리 문자열을 가져옵니다. 그런 다음 검색에서 URLSearchParams로 전달합니다. 따라서 get을 통해 "id"쿼리 매개변수의 값을 얻을 수 있습니다.

URLSearchParams API는 모든 브라우저에 내장되어 있으며 쿼리 문자열을 처리하기 위한 유틸리티 메서드를 렌더링합니다. URLSearchParams의 새 인스턴스를 만드는 경우 쿼리 문자열을 전달한 다음 해당 쿼리 문자열과 함께 작동하는 여러 메서드가 있는 개체를 다시 가져와야 합니다.

3. reactjs 앱에서 react-router 없이 쿼리 문자열에서 매개 변수 값을 얻으려면.

쿼리 문자열에서 매개 변수 값을 가져오기 위해 react-router를 사용하지 않으려면 react js 앱에서 작업할 수 있습니다. this.props.location.search를 사용해야 합니다. 다음은 react js 앱에서 react-router 없이 URL 매개변수 값을 얻기 위해 따라야 할 단계입니다.

Create react app

터미널을 열고 터미널에서 다음 common을 실행하여 새로운 react 앱을 생성합니다.

npx create-react-app my-react-app

React 앱을 실행하려면 터미널에서 다음 명령을 실행해야 합니다.

npm start

URL에서 React 앱을 확인할 수 있습니다: localhost:3000

부트스트랩 4 패키지와 쿼리 문자열을 설치합니다.

반응 프로젝트에 쿼리 문자열과 부트스트랩 4 라이브러리를 추가하려면 다음에 나열된 명령을 실행합니다.

npm install bootstrap --save
npm install query-string

그런 다음 src/App.js 파일에 react-router 및 boostrap.min.css 파일을 추가해야 합니다.

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 (

); } export default App;

홈 구성 요소 만들기
반응 js 앱의 src 디렉터리로 이동하여 Home.js 홈 구성 요소를 만듭니다. 그런 다음 다음 코드를 추가해야 합니다.

import React from 'react'
importqueryString from 'query-string'
class Home extends React.Component{
state = {
    site: 'unknown',
    subject: 'i don't know
  }
  handleQueryString = () => {
     let queries = queryString.parse(this.props.location.search)
    console.log(queries)
    this.setState(queries)
  }
  render() {
    return (
WebSite: {this.state.site}
Subject: {this.state.subject}
click me
); } } export default Home;

URL http://localhost:3000/?site=tutsmake&subject=get-query-string react js 애플리케이션에 표시될 수 있는 것은 귀하가 소유하고 있는 것으로 간주됩니다. 결과적으로 버튼을 클릭하면 반응 js 앱이 쿼리 문자열 매개변수를 수신합니다.

app.js에 구성 요소 추가

이제 src/App.js 파일에 Home.js 파일을 포함할 차례입니다. 다음과 같이 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 (
); } export default App;

4. 여러 쿼리 매개변수

import React from 'react';
import {useLocation} from "react-router-dom";
export default function EmployeeDetails() {
  const search = useLocation().search;
  const empId = new URLSearchParams(search).get('empId');
  const empName = new URLSearchParams(search).get('empName');
  return (
Employee Details Pag
{empId}
{empName}
); }

결론

결과적으로 쿼리 문자열에서 매개 변수 값을 가져오는 필수 기술을 이해하게 됩니다. 이러한 기술을 사용할 수 있습니다. 또는 개발자가 이 분야에 더 많은 지식과 전문성을 가지고 있으므로 반응 개발자를 고용할 수 있습니다.

React 개발자는 프로젝트를 처리할 때 고정관념에서 벗어나 생각합니다. 따라서 쿼리 또는 프로젝트에 대한 최상의 지원을 기대할 수 있습니다. 개발자와 요구 사항을 자유롭게 논의하고 올바른 솔루션을 얻을 수 있음을 기억하십시오. 그들은 전문 지식을 사용하여 요구 사항을 달성할 수 있는 모든 가능한 방법을 보여줄 것입니다.