আপনি কীভাবে প্রতিক্রিয়া-রাউটারে ক্যোয়ারী প্যারামগুলিকে প্রোগ্রামগতভাবে আপডেট করবেন?

Question

আমি ব্যবহার না করে কীভাবে প্রতিক্রিয়া-রাউটার দিয়ে ক্যোয়ারী প্যারামগুলি আপডেট করব তা খুঁজে পাচ্ছি না <Link/>। hashHistory.push(url)ক্যোয়ারী প্যারামগুলি নিবন্ধভুক্ত বলে মনে হচ্ছে না এবং মনে হচ্ছে আপনি কোনও যুক্তি বা অন্য কোনও যুক্তি হিসাবে কোনও জিনিস পাস করতে পারবেন না।

আপনি কিভাবে থেকে URL পরিবর্তন করতে পারি /shop/Clothes/dressesকরার /shop/Clothes/dresses?color=blueমধ্যে ব্যবহার না করেই প্রতিক্রিয়া-রাউটার <Link>?

এবং কোনও onChangeক্রিয়াকলাপ কি ক্যোয়ারী পরিবর্তনগুলির জন্য শোনার একমাত্র উপায়? প্রশ্নগুলির পরিবর্তনগুলি স্বয়ংক্রিয়ভাবে সনাক্ত ও প্রতিক্রিয়া হিসাবে কেন পরম পরিবর্তনগুলি হয় না?

Comments

আপনার এই প্রশ্নে

— জোসেফ

Answer 1

মধ্যে pushপদ্ধতি hashHistory, আপনি আপনার প্রশ্নের পরামিতি নির্দিষ্ট করতে পারেন। এই ক্ষেত্রে,

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

অথবা

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

ব্যবহারের জন্য অতিরিক্ত উদাহরণগুলির জন্য আপনি এই সংগ্রহস্থলটি পরীক্ষা করে দেখতে পারেনhistory

Comments

অসাধারণ! স্ট্রিংয়ের পরিবর্তে কি কোয়েরি অবজেক্ট {রঙ: নীল, আকার: 10 pass পাস করার জন্য কী আছে?

— ক্লেয়ারব্লানি

@ ক্লেয়ারাব্লানি বর্তমানে, আমি মনে করি না এটি সমর্থিত

— জন এফ।

@ ক্লেয়ারাব্লানি আপনি এটি চেষ্টা করতে পারেনrouter.push({ pathname: '/path', state: { color: 'blue', size: 10 }, });

— মিশেল এইচ

কেবল স্পষ্টকরণের জন্য, এটি আর বিক্রিয়া রাউটার ভি 4-তে কাজ করে না। তার জন্য, @ ক্রিস্টুপাস-পুনরায় জবাব দেখুন

— ডেকনিফিন

অস্থির সময়ে আমরা থাকি

— ক্রিস্তুপাস রেপিকা

Answer 2

রিঅ্যাক্ট-রাউটার ভি 4, রিডেক্স-থাঙ্ক এবং রিএ্যাক্ট-রাউটার-রিডেক্স (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
    }))
}

Comments

react-router-redux

— অবচয়

আমি মনে করি এটি এখন <Redirect>ট্যাগটি রেন্ডার করেই করা উচিত , ডক্স পৃষ্ঠায়

— TKAB

আপনি কেবল এইচওসিতে আপনার উপাদানটি মোড়ানো করতে পারেন withReducerযা আপনাকে প্রস্তাব দেবে history। এবং তারপর আপনি চালাতে পারেন history.push({ search: querystring }।

— সাস্ক্লাকজ

পরিবর্তে react-router-redux, আপনি connected-react-routerহ'ল যা অবনমিত নয় ব্যবহার করতে পারেন ।

— সেরেন বোইসেন

Answer 3

জন এর উত্তর সঠিক। আমি যখন প্যারামগুলি নিয়ে কাজ করি তখন আমার URLSearchParamsইন্টারফেসও প্রয়োজন :

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

আপনার withRouterএইচওসি উদাহরণ সহ আপনার উপাদান মোড়ানো প্রয়োজন হতে পারে । export default withRouter(YourComponent);।

Comments

withRouterকোনও এইচওসি, কোনও সাজসজ্জার নয়

— লুইস পাওলো

Answer 4

    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

Answer 5

গিটহাবের দিমিত্রিডুশকিন থেকে :

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);

Answer 6

আপনার ক্যোয়ারী স্ট্রিংটিকে স্বাচ্ছন্দ্যে বিশ্লেষণ করার জন্য যখন কোনও মডিউল প্রয়োজন তখন ক্যোরি -স্ট্রিং মডিউলটি ব্যবহার করা বাঞ্ছনীয়।

HTTP: // স্থানীয় হোস্ট: 3000 টোকেন = XXX-XXX-XXX

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

এখানে, আমি সফল গুগল-পাসপোর্ট প্রমাণীকরণের পরে নোড.জেএস সার্ভার থেকে আমার ক্লায়েন্টকে পুনঃনির্দেশ করছি, যা কোয়েরি প্যারাম হিসাবে টোকেনের সাহায্যে পুনঃনির্দেশ করছে।

আমি এটিকে কোয়েরি-স্ট্রিং মডিউল দিয়ে পার্স করছি, এটিকে সংরক্ষণ করছি এবং রিয়েল -রাউটার-রিডেক্স থেকে পুশ করে ইউআরএলটিতে ক্যোয়ারী প্যারামগুলি আপডেট করছি ।

Answer 7

আমি আপনাকে 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;
                }, {}
            )
        : {}
};

Answer 8

এটিও এভাবে লেখা যেতে পারে

this.props.history.push(`${window.location.pathname}&page=${pageNumber}`)