React를 사용하여 쿼리 문자열을 가져오려면 어떻게 해야 합니까?

React를 사용하여 쿼리 문자열을 가져오려면 어떻게 해야 합니까?

url http://localhost:3000/?http=123에서 "http=123"을 가져오려고 합니다.시험을 마친

//App.js
const search = this.props.location.search;
const params = new URLSearchParams(search);
const foo = params.get('foo');

console.log(this.props);

그리고 내 콘솔에는 위치가 표시되지 않는 https://d.pr/i/w5tAYF 이 표시됩니다.아무 곳이나 검색...어떻게 쿼리 문자열을 얻을 수 있는지 아세요?

React는 URL 검색 매개 변수를 처리하지 않습니다.여기 좀 봐주세요.window대신 이의를 제기합니다.고객의 가치를 실현하는 방법은 다음과 같습니다.query:

let search = window.location.search;
let params = new URLSearchParams(search);
let foo = params.get('query');

쿼리 문자열에 대해 별도의 함수를 만들었습니다.

function useQuery() {
  return new URLSearchParams(window.location.search);
}

그러면 원하는 쿼리 문자열을 제공할 수 있습니다.고객님의 경우query

  let query = useQuery().get('query');

컴포넌트 내에서 다음과 같은 작업을 수행할 수 있습니다.

const values = queryString.parse(this.props.location.search)
console.log(values.filter) 
console.log(values.origin) 

여기 더 있어요.

이거 드셔보세요

두 가지 방법 모두 유효

http://localhost:4000/#/amoos?id=101

// ReactJS
import React from "react";
import { useLocation } from "react-router-dom";

const MyComponent = () => {
    const search = useLocation().search;
    const id = new URLSearchParams(search).get("id");
    console.log(id); //101
}


// VanillaJS
const id = window.location.search.split("=")[1];
console.log(id); //101

현재 열려 있는 URL이 아닌 사용자 지정 URL에서 쿼리 매개 변수를 가져오려면 아래 코드를 사용하십시오.

const customURL = 'https://custom.url.com?success=true'
const params = new URLSearchParams(customURL.split('?')[1])

const successParamValue = params.get('success')

React Native를 사용하는 경우 지원하려면 추가 단계가 필요합니다.URLSearchParams. 아래 패키지를 설치하기만 하면 됩니다.바로 그거야!

npm install react-native-url-polyfill

또는

yarn add react-native-url-polyfill

import { useLocation } from "react-router-dom";

const search = useLocation().search;
console.log('path', search);
const id = new URLSearchParams(search).get("id");
console.log(id);

언급URL : https://stackoverflow.com/questions/52652661/how-to-get-query-string-using-react