리액터 힘 쿼리 문자열이 단일 요소가 있는 배열이어야 함

리액터 힘 쿼리 문자열이 단일 요소가 있는 배열이어야 함

나는 방금 로 만들어진 앱을 마이그레이션했다.react그리고react-router구본에서 에 이르기까지.react 0.15그리고react-router 2.0

이전 버전에서Links다음과 같이 생성된 경우:

<Link to='route-name' query={{ids: [1]}}>
  {name}
</Link>

이것은 다음과 같은 URL을 구성했다./route/?ids[]=1그렇게 되면 구성 요소 안에 들어가게 되겠지

this.props.query = {
  ids: ['1']
}

업그레이드 후Link선언이 다음으로 변경됨:

<Link to={{pathname:`/route/`, query={ids: [1]}}}>
  {name}
</Link>

다음과 같은 URL을 생성함/route/ids=1, 이제 라우터는 다음과 같이 쿼리 문자열을 구문 분석한다.

this.props.location.query = {
  ids : '1'
}

링크 선언의 배열이 URL의 빈 괄호를 사용하지 않지만 둘 이상의 요소가 있는 경우 배열을 가져올 수 있는 유일한 방법은 url에서 빈 괄호를 사용하지 않는 것이다.

따라서 단일 요소만 있을 때 라우터가 어레이를 사용하도록 강제하는 방법이 있는지, 매번 어레이인지, 문자열인지 확인하고 싶지 않다.

기록 문서에 설명된 대로 질의 문자열을 필요에 따라 구문 분석하는 사용자 정의 기록을 사용해야 한다.

리액터-루터(React-Router)는query-string구문 분석 및 스트링파이 기능을 위한 패키지. 코드를 간단히 살펴보는 것. 사용 사례를 뒷받침하는 것은 아닌 것 같은데, 다행히도qs패키지는 옵션만 설정하면 된다.

이런 일을 해야 할 것이다.

import { stringify, parse } from 'qs'
import { Router, useRouterHistory } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'

const stringifyQuery = query => stringify(query, { arrayFormat: 'brackets' })
const history = useRouterHistory(createBrowserHistory)({ parseQueryString: parse, stringifyQuery })

<Router history={history} />

qs 패키지를 추천한다.

import { stringify } from 'qs';

var queryStr = stringify({ ids: [21] }, { encode: false });

참조URL: https://stackoverflow.com/questions/35851977/react-router-force-querystring-to-be-an-array-with-a-single-element