내 프로젝트에서 react-router-dom 4.0.0-beta.6을 사용하고 있습니다. 다음과 같은 코드가 있습니다.

<Route exact path="/home" component={HomePage}/>

그리고 HomePage구성 요소 에서 쿼리 매개 변수를 얻고 싶습니다 . location.search다음과 같은 param을 찾았 ?key=value으므로 구문 분석되지 않았습니다.

react-router v4로 쿼리 매개 변수를 얻는 올바른 방법은 무엇입니까?

쿼리 문자열을 구문 분석하는 기능은 여러 가지 구현을 지원하라는 요청이 수년에 걸쳐 있었기 때문에 V4에서 제외되었습니다. 이를 통해 팀은 사용자가 구현 방식을 결정하는 것이 가장 좋을 것이라고 결정했습니다. 쿼리 문자열 lib를 가져 오는 것이 좋습니다. 여기 내가 사용하는

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

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

new URLSearchParams네이티브를 원하고 필요에 맞게 작동 하는 경우 에도 사용할 수 있습니다.

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

여기 에서 결정에 대해 자세히 읽을 수 있습니다.

주어진 대답은 확실합니다.

query-string 대신 qs 모듈 을 사용하려는 경우 (인기면에서 거의 동일 함) 다음은 구문입니다.

const query = qs.parse(props.location.search, {
  ignoreQueryPrefix: true
})

ignoreQueryPrefix의 옵션은 최고의 물음표를 무시하는 것입니다.

허용되는 답변은 잘 작동하지만 추가 패키지를 설치하지 않으려면 다음을 사용할 수 있습니다.

getUrlParameter = (name) => {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    let regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    let results = regex.exec(window.location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  };

주어진 http://www.google.co.in/?key=value

getUrlParameter('key');

돌아올 것이다 value

또 다른 유용한 접근 방식은 URLSearchParams이와 같이 즉시 사용하는 것입니다 .

  let { search } = useLocation();

   const query = new URLSearchParams(search);
   const paramField = query.get('field');
   const paramValue = query.get('value');

깨끗하고 읽기 쉽고 모듈이 필요하지 않습니다. 아래에 더 많은 정보가 있습니다.

• https://reacttraining.com/react-router/web/example/query-parameters
• https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

나는 반응 라우터 v4의 매개 변수에 대해 연구하고 있었는데 반응 라우터 v2 / 3과는 달리 v4에는 사용하지 않았습니다. 나는 다른 기능을 떠날 것입니다-아마도 누군가가 도움이 될 것입니다. es6 또는 일반 자바 스크립트 만 필요합니다.

function parseQueryParams(query) {
  //You get a '?key=asdfghjkl1234567890&val=123&val2&val3=other'
  const queryArray = query.split('?')[1].split('&');
  let queryParams = {};
  for (let i = 0; i < queryArray.length; i++) {
    const [key, val] = queryArray[i].split('=');
    queryParams[key] = val ? val : true;
  }
  /* queryParams = 
     {
      key:"asdfghjkl1234567890",
      val:"123",
      val2:true,
      val3:"other"
     }
  */
  return queryParams;
}

또한이 기능을 개선 할 수 있습니다.

뭐라고?

queryfie(string){
    return string
        .slice(1)
        .split('&')
        .map(q => q.split('='))
        .reduce((a, c) => { a[c[0]] = c[1]; return a; }, {});
}

queryfie(this.props.location.search);

방금 이것을 만들었으므로 하위 버전에서 라우터 v4 이상을 반응하도록 업데이트하는 경우 전체 코드 구조 (redux 라우터 저장소에서 쿼리를 사용하는 경우)를 변경할 필요가 없습니다.

https://github.com/saltas888/react-router-query-middleware

아주 쉽게

그냥 후크를 사용하십시오 useParams()

예:

라우터 :

<Route path="/user/:id" component={UserComponent} />

구성 요소에서 :

export default function UserComponent() {

  const { id } = useParams();

  return (
    <>{id}</>
  );
}

패키지 필요 없음 :

const params = JSON.parse(JSON.stringify(this.props.match.params));

그런 다음 다음을 사용하여 관련 매개 변수에 도달 할 수 있습니다. params.id