react-router v4에서 쿼리 문자열을 구문 분석하는 방법

react-router v4에서 쿼리 문자열을 구문 분석하는 방법

리액트 라우터 v3에서는props.location.query.foo(현재 위치가?foo=bar)

인react-router-dom@4.0.0 props.location가지고 있을 뿐이다props.location.search와 같은 끈이다.?foo=bar&other=thing.

아마도 그 문자열을 수동으로 해석하고 분해하여 다음 값을 찾아야 할 것 같습니다.foo또는other.

스크린샷console.log(this.props): (다음부터의 방법에 주의해 주세요.?artist=band여기서 가치를 얻고 싶습니다.artist그 가치는band)

이미 맞다고 가정하신 것 같군요수년간 서로 다른 구현을 지원하라는 요청이 있었기 때문에 V4에서 쿼리 문자열을 구문 분석하는 기능이 제거되었습니다.그 결과, 그 실장 방법을 유저가 결정하는 것이 최선이라고 판단했습니다.쿼리 문자열 lib를 Import할 것을 권장합니다.당신이 말한 것은 지금까지 나에게 큰 효과가 있었습니다.

const queryString = require('query-string');

const parsed = queryString.parse(props.location.search);

를 사용할 수도 있습니다.new URLSearchParams네이티브한 것을 원하는 경우, 그리고 그것이 당신의 요구에 부합하는 경우

const search = props.location.search; // could be '?foo=bar'
const params = new URLSearchParams(search);
const foo = params.get('foo'); // bar

결정에 대한 자세한 내용은 여기를 참조하십시오.

나는 나의 작은 것을 바친다.ES6형상 기능, 멋지고 가볍고 편리함:

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

모든 것이 여기 있습니다. 당신을 도울 수 있기를 바랍니다.

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

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

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

import querySearch from "stringquery";

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

감사해요.

이 게시물을 찾길 잘했다.링크 감사합니다.몇 시간 후에 드디어 코드를 업그레이드 할 수 있었습니다.

query-string을 사용하는 사용자는 다음과 같은 작업을 수행해야 합니다.

var nameYouWant = queryString.parse(this.props.location.search).nameYouWant;

제 경우엔 이런 일이 있었고,this.props.location.search.theUrlYouWant일을 거부했을 겁니다.타일러가 언급한 두 번째 옵션도 비슷한 조정으로 내게 효과가 있었다.

단순한 문제 때문에 서드파티 패키지를 사용하는 것은 과잉입니다.

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

        let data = {};

        for (let params of query.entries()) {
            data[params[0]] = +params[1];
        }

        this.setState({ urldata: data});
}

그러면 URL 쿼리 매개 변수가 개체로 변환됩니다.

패키지를 설치하는 대신 간단한 함수를 사용하여 쿼리 매개 변수를 추출할 수 있습니다.

//Param Extractor
const parseParams = (params = "") => {
  const rawParams = params.replace("?", "").split("&");
  const extractedParams = {};
  rawParams.forEach((item) => {
    item = item.split("=");
    extractedParams[item[0]] = item[1];
  });
  return extractedParams;
};

//Usage
const params = parseParams(this.props?.location?.search); // returns an object like:
// {id:1,name:john...}

아무도 Url Search Params와 그 정보를 언급하지 않은 것이 놀랍습니다..get방법.

리액트 라우터 useLocation에서 쿼리 스트링을 얻을 경우 늦은 답변:

 import useLocation from 'react-router';
 import queryString from 'query-string';

 const handleQueryString = useLocation().search;
 // nice=day&very=sunny
 
 // Get a param
 const { nice } = queryString.parse(useLocation().search)

여기에 이미 나와 있는 답변 외에 후크로 만들 수도 있습니다.

import { useSearchParams } from 'react-router-dom';

const useParsedSearchParams = () => {
    const [searchParams] = useSearchParams();

    return Object.fromEntries([...searchParams]);
};

export default useParsedSearchParams;

위치 대신 useSearchParams를 사용합니다.react-synamic-v6 검색

import { useSearchParams } from 'react-router-dom';

const Chat = ({location}) => {

  const [searchParams] = useSearchParams();

  // pass searchParams as a dependency into the useEffect
  useEffect(()=>{
    const currentParams = Object.fromEntries([...searchParams])

    console.log(currentParams);
  },[searchParams])

언급URL : https://stackoverflow.com/questions/42862253/how-to-parse-query-string-in-react-router-v4