[reactjs] react-router에서 쿼리 매개 변수를 프로그래밍 방식으로 어떻게 업데이트합니까?

을 사용하지 않고 react-router로 쿼리 매개 변수를 업데이트하는 방법을 찾을 수없는 것 같습니다 <Link/>. hashHistory.push(url)쿼리 매개 변수를 등록하지 않는 것 같고 쿼리 개체 또는 다른 것을 두 번째 인수로 전달할 수없는 것 같습니다.

어떻게에서 URL을 변경하는 방법 /shop/Clothes/dresses에 /shop/Clothes/dresses?color=blue의는 반응 라우터를 사용하지 않고 <Link>?

그리고 onChange함수가 쿼리 변경을 수신하는 유일한 방법입니까? 쿼리 변경이 자동으로 감지되고 매개 변수 변경에 반응하지 않는 이유는 무엇입니까?

답변

의 push메소드 내에서 hashHistory쿼리 매개 변수를 지정할 수 있습니다. 예를 들어

history.push({
  pathname: '/dresses',
  search: '?color=blue'
})

또는

history.push('/dresses?color=blue')

이 저장소 에서 사용에 대한 추가 예제를 확인할 수 있습니다.history

답변

react-router v4, redux-thunk 및 react-router-redux (5.0.0-alpha.6) 패키지를 사용한 예제입니다.

사용자가 검색 기능을 사용할 때 같은 검색어에 대한 URL 링크를 동료에게 보낼 수 있기를 바랍니다.

import { push } from 'react-router-redux';
import qs from 'query-string';

export const search = () => (dispatch) => {
    const query = { firstName: 'John', lastName: 'Doe' };

    //API call to retrieve records
    //...

    const searchString = qs.stringify(query);

    dispatch(push({
        search: searchString
    }))
}

답변

John의 대답 이 맞습니다. params를 다룰 때 URLSearchParams인터페이스 도 필요합니다 .

this.props.history.push({
    pathname: '/client',
    search: "?" + new URLSearchParams({clientId: clientId}).toString()
})

withRouter예를 들어 HOC로 구성 요소를 래핑해야 할 수도 있습니다 . export default withRouter(YourComponent);.

답변

    for react-router v4.3,

 const addQuery = (key, value) => {
  let pathname = props.location.pathname;
 // returns path: '/app/books'
  let searchParams = new URLSearchParams(props.location.search);
 // returns the existing query string: '?type=fiction&author=fahid'
  searchParams.set(key, value);
  this.props.history.push({
           pathname: pathname,
           search: searchParams.toString()
     });
 };

  const removeQuery = (key) => {
  let pathname = props.location.pathname;
 // returns path: '/app/books'
  let searchParams = new URLSearchParams(props.location.search);
 // returns the existing query string: '?type=fiction&author=fahid'
  searchParams.delete(key);
  this.props.history.push({
           pathname: pathname,
           search: searchParams.toString()
     });
 };


 ```

 ```
 function SomeComponent({ location }) {
   return <div>
     <button onClick={ () => addQuery('book', 'react')}>search react books</button>
     <button onClick={ () => removeQuery('book')}>remove search</button>
   </div>;
 }
 ```


 //  To know more on URLSearchParams from 
[Mozilla:][1]

 var paramsString = "q=URLUtils.searchParams&topic=api";
 var searchParams = new URLSearchParams(paramsString);

 //Iterate the search parameters.
 for (let p of searchParams) {
   console.log(p);
 }

 searchParams.has("topic") === true; // true
 searchParams.get("topic") === "api"; // true
 searchParams.getAll("topic"); // ["api"]
 searchParams.get("foo") === null; // true
 searchParams.append("topic", "webdev");
 searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
 searchParams.set("topic", "More webdev");
 searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
 searchParams.delete("topic");
 searchParams.toString(); // "q=URLUtils.searchParams"


[1]: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

답변

에서 GitHub의에 DimitriDushkin :

import { browserHistory } from 'react-router';

/**
 * @param {Object} query
 */
export const addQuery = (query) => {
  const location = Object.assign({}, browserHistory.getCurrentLocation());

  Object.assign(location.query, query);
  // or simple replace location.query if you want to completely change params

  browserHistory.push(location);
};

/**
 * @param {...String} queryNames
 */
export const removeQuery = (...queryNames) => {
  const location = Object.assign({}, browserHistory.getCurrentLocation());
  queryNames.forEach(q => delete location.query[q]);
  browserHistory.push(location);
};

또는

import { withRouter } from 'react-router';
import { addQuery, removeQuery } from '../../utils/utils-router';

function SomeComponent({ location }) {
  return <div style={{ backgroundColor: location.query.paintRed ? '#f00' : '#fff' }}>
    <button onClick={ () => addQuery({ paintRed: 1 })}>Paint red</button>
    <button onClick={ () => removeQuery('paintRed')}>Paint white</button>
  </div>;
}

export default withRouter(SomeComponent);

답변

사용하여 쿼리 문자열 모듈을 사용하면 쉽게 당신의 쿼리 문자열을 구문 분석 모듈을 필요로하는 권장 하나입니다.

http : // localhost : 3000? token = xxx-xxx-xxx

componentWillMount() {
    var query = queryString.parse(this.props.location.search);
    if (query.token) {
        window.localStorage.setItem("jwt", query.token);
        store.dispatch(push("/"));
    }
}

여기서는 성공적인 Google-Passport 인증 후 Node.js 서버에서 클라이언트로 다시 리디렉션하고 있는데, 이는 쿼리 매개 변수로 토큰을 사용하여 다시 리디렉션됩니다.

query-string 모듈로 구문 분석하고, 저장하고 react-router-redux 에서 푸시를 사용하여 URL의 쿼리 매개 변수를 업데이트합니다 .

답변

나는 당신이 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;
                }, {}
            )
        : {}
};