[javascript] react-router 해시 조각에서 쿼리 매개 변수 가져 오기

Program / 글쓴이

클라이언트 측에서 내 응용 프로그램에 react 및 react-router를 사용하고 있습니다. 다음과 같은 URL에서 다음 쿼리 매개 변수를 가져 오는 방법을 알아낼 수없는 것 같습니다.

http://xmen.database/search#/?status=APPROVED&page=1&limit=20

내 경로는 다음과 같습니다 (내가 아는 경로는 완전히 잘못되었습니다).

var routes = (
<Route>
    <DefaultRoute handler={SearchDisplay}/>
    <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
    <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);

내 경로는 잘 작동하지만 원하는 매개 변수를 얻기 위해 경로 형식을 지정하는 방법을 잘 모르겠습니다. 이것에 대한 도움을 주셔서 감사합니다!

답변

참고 : 댓글에서 복사 / 붙여 넣기. 원래 게시물을 좋아하십시오!

es6로 작성하고 react 0.14.6 / react-router 2.0.0-rc5를 사용합니다. 이 명령을 사용하여 구성 요소에서 쿼리 매개 변수를 조회합니다.

this.props.location.query

URL에서 사용 가능한 모든 쿼리 매개 변수의 해시를 생성합니다.

최신 정보:

React-Router v4의 경우 this answer를 참조하십시오 . 기본적으로 this.props.location.search쿼리 문자열을 가져오고 query-string패키지 또는 URLSearchParams로 구문 분석하는 데 사용 합니다 .

const params = new URLSearchParams(paramsString);
const tags = params.get('tags');

답변

OLD (v4 이전) :

es6로 작성하고 react 0.14.6 / react-router 2.0.0-rc5를 사용합니다. 이 명령을 사용하여 구성 요소에서 쿼리 매개 변수를 조회합니다.

this.props.location.query

URL에서 사용 가능한 모든 쿼리 매개 변수의 해시를 생성합니다.

업데이트 (React Router v4 +) :

React Router 4의 this.props.location.query가 제거되었습니다 (현재 v4.1.1 사용). https://github.com/ReactTraining/react-router/issues/4410

자신의 방법을 사용하여 쿼리 매개 변수를 구문 분석하기를 원하는 것 같습니다. 현재이 라이브러리를 사용하여 간격을 메우려면 https://github.com/sindresorhus/query-string

답변

위의 답변은 작동하지 않습니다 react-router v4 . 문제를 해결하기 위해 제가 한 작업은 다음과 같습니다.

먼저 구문 분석에 필요한 쿼리 문자열 을 설치 합니다 .

npm install -save query-string

이제 라우팅 된 구성 요소에서 다음과 같이 구문 분석되지 않은 쿼리 문자열에 액세스 할 수 있습니다.

this.props.location.search

콘솔에 로그인하여 교차 확인할 수 있습니다.

마지막으로 쿼리 매개 변수에 액세스하기 위해 구문 분석

const queryString = require('query-string');
var parsed = queryString.parse(this.props.location.search);
console.log(parsed.param); // replace param with your own

따라서 쿼리가 ?hello=world

console.log(parsed.hello) 기록합니다 world

답변

업데이트 2017.12.25

"react-router-dom": "^4.2.2"

다음과 같은 URL

BrowserHistory: http://localhost:3000/demo-7/detail/2?sort=name

HashHistory: http://localhost:3000/demo-7/#/detail/2?sort=name

와 쿼리 문자열 의존성 :

this.id = props.match.params.id;
this.searchObj = queryString.parse(props.location.search);
this.from = props.location.state.from;

console.log(this.id, this.searchObj, this.from);

결과 :

2 {sort: "name"} home

"react-router": "^2.4.1"

다음과 같은 URL http://localhost:8080/react-router01/1?name=novaline&age=26

const queryParams = this.props.location.query;

queryParams는 쿼리 매개 변수를 포함하는 객체입니다. {name: novaline, age: 26}

답변

stringquery 패키지 사용 :

import qs from "stringquery";

const obj = qs("?status=APPROVED&page=1limit=20");
// > { limit: "10", page:"1", status:"APPROVED" }

쿼리 문자열 패키지 사용 :

import qs from "query-string";
const obj = qs.parse(this.props.location.search);
console.log(obj.param); // { limit: "10", page:"1", status:"APPROVED" }

패키지 없음 : 

const convertToObject = (url) => {
  const arr = url.slice(1).split(/&|=/); // remove the "?", "&" and "="
  let params = {};

  for(let i = 0; i < arr.length; i += 2){
    const key = arr[i], value = arr[i + 1];
    params[key] = value ; // build the object = { limit: "10", page:"1", status:"APPROVED" }
  }
  return params;
};


const uri = this.props.location.search; // "?status=APPROVED&page=1&limit=20"

const obj = convertToObject(uri);

console.log(obj); // { limit: "10", page:"1", status:"APPROVED" }


// obj.status
// obj.page
// obj.limit

희망 🙂

즐거운 코딩 되세요!

답변

"react-router-dom": "^5.0.0",

다음과 같은 URL 주소가있는 구성 요소에만 추가 모듈을 추가 할 필요가 없습니다.

http : // localhost : 3000 / # /? authority ‘

다음과 같은 간단한 코드를 시도해 볼 수 있습니다.

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

답변

다른 답변을 읽은 후 (처음에는 @ duncan-finney, 그 다음에는 @Marrs)이 문제를 해결하는 관용적 react-router 2.x 방식을 설명하는 변경 로그를 찾기 시작했습니다. 구성 요소에서 위치 (쿼리에 필요한)를 사용하는 방법에 대한 문서 는 실제로 실제 코드와 모순됩니다. 따라서 그들의 조언을 따르면 다음과 같은 큰 경고를 받게됩니다.

Warning: [react-router] `context.location` is deprecated, please use a route component's `props.location` instead.

위치 유형을 사용하는 위치라는 컨텍스트 속성을 가질 수 없다는 것이 밝혀졌습니다. 그러나 위치 유형을 사용하는 loc이라는 컨텍스트 속성을 사용할 수 있습니다. 따라서 솔루션은 다음과 같이 소스를 약간 수정 한 것입니다.

const RouteComponent = React.createClass({
    childContextTypes: {
        loc: PropTypes.location
    },

    getChildContext() {
        return { location: this.props.location }
    }
});

const ChildComponent = React.createClass({
    contextTypes: {
        loc: PropTypes.location
    },
    render() {
        console.log(this.context.loc);
        return(<div>this.context.loc.query</div>);
    }
});

또한 자녀에게 원하는 위치 개체의 일부만 전달하면 동일한 이점을 얻을 수 있습니다. 개체 유형을 변경하라는 경고는 변경되지 않았습니다. 도움이 되었기를 바랍니다.