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라이크
BrowserHistory
http://localhost:3000/demo-7/detail/2?sort=name
HashHistory
http://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
'programing' 카테고리의 다른 글
서로 다른 호스트에서 Rails 앱과 Wordpress 블로그 링크 (0) | 2023.03.26 |
---|---|
프라이머리 키에 "not null"을 지정해야 합니까?Oracle/SQl (0) | 2023.03.26 |
wp-cron.php는 언제 Wordpress에서 실행됩니까? (0) | 2023.03.26 |
Java에서 JSON Collection 개체가 비어 있는지 테스트하는 방법 (0) | 2023.03.26 |
XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get의 차이점은 무엇입니까? (0) | 2023.03.26 |