[reactjs] 반응-쿼리 문자열에서 매개 변수 값을 얻는 방법

라우터 v3 반응

React Router v3을 사용하면 this.props.location.search(? qs1 = naisarg & qs2 = parmar) 에서 쿼리 문자열을 얻을 수 있습니다 . 예를 let params = queryString.parse(this.props.location.search)들어을 사용하면{ qs1 : 'naisarg', qs2 : 'parmar'}

라우터 v4 반응

React Router v4에서는 this.props.location.query더 이상 존재하지 않습니다. this.props.location.search대신 직접 사용하거나 같은 기존 패키지를 사용하여 쿼리 매개 변수를 구문 분석 해야합니다 query-string.

예

다음은 React Router v4 및 query-string라이브러리 를 사용하는 최소 예 입니다.

import { withRouter } from 'react-router-dom';
import queryString from 'query-string';

class ActivateAccount extends Component{
    someFunction(){
        let params = queryString.parse(this.props.location.search)
        ...
    }
    ...
}
export default withRouter(ActivateAccount);

합리적인

query속성 제거에 대한 합리적인 라우터의 팀 은 다음과 같습니다.

쿼리 문자열 구문 분석 / 문자열 화를 약간 다르게하는 인기있는 패키지가 많이 있으며, 이러한 차이는 일부 사용자에게는 “올바른”방법이고 다른 사용자에게는 “잘못된”방법 일 수 있습니다. React Router가 “올바른”것을 선택한 경우 일부 사람들에게만 적합합니다. 그런 다음 다른 사용자가 선호하는 쿼리 구문 분석 패키지를 대체 할 수있는 방법을 추가해야합니다. 키-값 쌍을 구문 분석해야하는 React Router의 검색 문자열은 내부적으로 사용되지 않으므로 이들 중 어느 것이 “올바른”것인지 선택할 필요가 없습니다.

[…]

4.0에 대한 접근 방식은 모든 “포함 된 배터리”종류의 기능을 제거하고 기본 라우팅으로 돌아가는 것입니다. 쿼리 문자열 구문 분석 또는 비동기 로딩 또는 Redux 통합 또는 매우 구체적인 것이 필요한 경우 사용 사례에 맞게 라이브러리를 추가 할 수 있습니다. 덜 까다로워서 필요하지 않으며 특정 환경 설정 및 요구에 맞게 항목을 사용자 정의 할 수 있습니다.

GitHub 에 대한 전체 토론을 찾을 수 있습니다 .

답변

http://www.google.com.au?token=123

 const query = new URLSearchParams(this.props.location.search);

const token = query.get('token')
console.log(token)//123

npm i query-string

 import queryString from 'query-string'

const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log('token',token)//123

function getQueryVariable(variable)
{
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = 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);
}

getQueryVariable('aid') //160990

const qs = require('query-string');
//or
import * as qs from 'query-string';

console.log(location.search);
//=> '?foo=bar'

const parsed = qs.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}

const search = window.location.search;
const params = new URLSearchParams(search);
const foo = params.get('bar');

const urlParams = new URLSearchParams(this.props.location.search)
const key = urlParams.get('__firebase_request_key')