react-router 해시 조각에서 쿼리 매개 변수를 가져오는 중

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에 기록하고 0.14.6 / 리액트 라우터 2.0.0-rc5를 사용합니다.이 명령어를 사용하여 컴포넌트의 쿼리 파라미터를 검색합니다.

this.props.location.query

그러면 URL에서 사용 가능한 모든 쿼리 파라미터의 해시가 생성됩니다.

업데이트:

React-Router v4의 경우 다음 답변을 참조하십시오.기본적으로 사용this.props.location.search할 수 있습니다.query-string패키지 또는 URLearchParams:

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

위의 답변은 에서는 기능하지 않습니다.react-router v4 되었습니다.

먼저 해석에 필요한 query-string을 설치합니다.

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

구(v4 이전):

es6에 기록하고 0.14.6 / 리액트 라우터 2.0.0-rc5를 사용합니다.이 명령어를 사용하여 컴포넌트의 쿼리 파라미터를 검색합니다.

this.props.location.query

그러면 URL에서 사용 가능한 모든 쿼리 파라미터의 해시가 생성됩니다.

UPDATE(React Router v4+):

를 참조해 주세요.React Router 4의 쿼리는 제거되었습니다(현재 v4.1.1을 사용하고 있습니다).https://github.com/ReactTraining/react-router/issues/4410

쿼리 파라미터를 해석하기 위해 독자적인 방법을 사용하고 싶은 것 같습니다.현재 이 라이브러리를 사용하여 공백을 메우고 있습니다.https://github.com/sindresorhus/query-string

업데이트 2017.12.25

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

url라이크

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

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

query-string 의존관계:

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"

like URL likehttp://localhost:8080/react-router01/1?name=novaline&age=26

const queryParams = this.props.location.query;

입니다.queryParams는 queryParams 입니다.{name: novaline, age: 26}

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

다음과 같은 URL 주소를 가진 컴포넌트에만 모듈을 추가할 필요가 없습니다.

http://localhost:3000/#/?http'

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

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

stringquery 패키지 포함:

import qs from "stringquery";

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

query-string 패키지 사용 시:

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

도움이 되었으면 좋겠다:)

해피 코딩!

다른 답변(처음에는 @duncan-finney에 의해, 다음으로 @Mars에 의해)을 읽은 후, 이 문제를 해결하기 위한 관용 리액트 라우터 2.x의 방법을 설명하는 변경 로그를 찾기 시작했습니다.컴포넌트에서 위치 사용(쿼리에 필요한)에 대한 설명서는 실제 코드와 모순됩니다.그래서 만약 당신이 그들의 충고를 따른다면, 당신은 다음과 같은 큰 분노의 경고를 받게 될 것이다.

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

로케이션 타입을 사용하는 location이라는 컨텍스트속성은 가질 수 없습니다.그러나 위치 유형을 사용하는 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>);
    }
});

또한 자녀에게 원하는 위치 객체의 일부만 동일한 혜택을 받을 수 있습니다.경고를 개체 유형으로 변경하도록 변경하지 않았습니다.도움이 됐으면 좋겠다.

단순 js 솔루션:

queryStringParse = function(string) {
    let parsed = {}
    if(string != '') {
        string = string.substring(string.indexOf('?')+1)
        let p1 = string.split('&')
        p1.map(function(value) {
            let params = value.split('=')
            parsed[params[0]] = params[1]
        });
    }
    return parsed
}

또한 다음을 사용하여 어디에서나 호출할 수 있습니다.

var params = this.queryStringParse(this.props.location.search);

이게 도움이 됐으면 좋겠다.

"react-router-dom": "6"

다음 방법으로 페이지 속성 값을 얻을 수 있습니다.useSearchParams

let [searchParams, setSearchParams] = useSearchParams();

searchParams.get('page')

다음과 같은 URL이 있는 경우http://asd.com/report/7?page=3페이지를 얻을 수 있습니다.완전한 예는 다음과 같습니다.

 import React from 'react';
 import { useSearchParams} from "react-router-dom";
    
    const Detail = (props) => {
        const [searchParams, setSearchParams] = useSearchParams();
        console.log('page from search',searchParams.get('page')) // 1
        return (
            <div></div>
        );
    };
    
    export default Detail;

리액트 라우터

query-string 모듈을 사용하면 최적화된 프로덕션 빌드를 생성할 때 다음 오류가 발생할 수 있습니다.

이 파일에서 코드를 최소화할 수 없습니다. ./node_modules/query-string/index.js:8

이 문제를 해결하려면 빌드 실행 중에 문제 없이 동일한 프로세스를 수행하는 stringquery라는 대체 모듈을 사용하십시오.

import querySearch from "stringquery";

var query = querySearch(this.props.location.search);

언급URL : https://stackoverflow.com/questions/29852998/getting-query-parameters-from-react-router-hash-fragment