বিক্রিয়া-রাউটার হ্যাশ খণ্ড থেকে কোয়েরি প্যারামিটারগুলি পাওয়া

Question

আমি ক্লায়েন্টের পক্ষে আমার অ্যাপ্লিকেশনটির জন্য প্রতিক্রিয়া এবং প্রতিক্রিয়া-রাউটার ব্যবহার করছি। ইউআরএল থেকে নীচের ক্যোয়ারী প্যারামিটারগুলি কীভাবে পাবেন তা আমি বুঝতে পারি না:

http://xmen.database/search#/?status=APPROVED&page=1&limit=20

আমার রুটগুলি দেখতে দেখতে (পথটি আমি পুরোপুরি ভুল জানি):

var routes = (
<Route>
    <DefaultRoute handler={SearchDisplay}/>
    <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
    <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);

আমার রুটটি ঠিকঠাক কাজ করছে তবে আমি যে পরামিতিগুলি চাই সেগুলি পেতে কীভাবে পথটি ফর্ম্যাট করবেন তা ঠিক নিশ্চিত নই। এতে কোনও সহায়তার প্রশংসা করুন!

Comments

আমি চারপাশে তাকিয়েছি এবং কেবলমাত্র উপাদানগুলির মধ্যে কোয়েরি স্ট্রিং প্যারামিটারগুলি বের করার উদাহরণগুলি খুঁজে পেতে সক্ষম হয়েছিgetCurrentQuery

— কোরি ড্যানিয়েলসন

github.com/rackt/react-router/issues/209

— কোরি ড্যানিয়েলসন

আপনি willTransitionToআপনার হ্যান্ডলারের হুক ব্যবহার করতে পারেন । এটি কোয়েরি স্ট্রিং পরামিতিগুলি গ্রহণ করে। github.com/rackt/react-router/commit/…

— কোরি ড্যানিয়েলসন

এছাড়াও এখানে রূপান্তর হুক সংক্রান্ত নথির জন্য : github.com/rackt/react-router/blob/master/docs/api/compferences/… আপনার সমাধানের সাথে সমাধান করার পরে আপনার এই প্রশ্নের উত্তর দেওয়া উচিত। আমি নিশ্চিত আপনি এই পরিস্থিতিতে ঝাঁপিয়ে পড়ার শেষ ব্যক্তি হবেন না।

— কোরি ড্যানিয়েলসন

Answer 1

দ্রষ্টব্য: মন্তব্য থেকে অনুলিপি / আটকানো। আসল পোস্টটি অবশ্যই ভুলবেন না!

এস 6 তে লেখা এবং 0.14.6 / রিএ্যাক্ট-রাউটার 2.0.0-আরসি 5 ব্যবহার করুন। আমি আমার উপাদানগুলিতে ক্যোয়ারী প্যারামগুলি অনুসন্ধান করতে এই আদেশটি ব্যবহার করি:

this.props.location.query

এটি url- তে সমস্ত উপলব্ধ ক্যোয়ারী প্যারামগুলির একটি হ্যাশ তৈরি করে।

হালনাগাদ:

প্রতিক্রিয়া-রাউটার ভি 4 এর জন্য, এই উত্তরটি দেখুন । মূলত, this.props.location.searchক্যোয়ারী স্ট্রিংটি পেতে এবং query-stringপ্যাকেজ বা ইউআরএল অনুসন্ধান অনুসন্ধানের সাথে পার্স করতে ব্যবহার করুন :

const params = new URLSearchParams(paramsString); 
const tags = params.get('tags');

Comments

প্রতিক্রিয়া-রাউটার ১.x এর পরে আর ২.x //// এর মতো আর উপায় নেই

— পিটার আরন জেন্টাই

প্রতি পিটার, এই উদাহরণে তারিখ সীমার বাইরে: দেখুন stackoverflow.com/a/35005474/298073

— btown

queryপ্রতিক্রিয়া রাউটার 4 এ চলে গেছে বলে মনে হচ্ছে g github.com/ReactTraining/react-router/issues/…

— সুং চ

Answer 2

ওল্ড (প্রাক ভি 4):

এস 6 তে লেখা এবং 0.14.6 / রিএ্যাক্ট-রাউটার 2.0.0-আরসি 5 ব্যবহার করুন। আমি আমার উপাদানগুলিতে ক্যোয়ারী প্যারামগুলি অনুসন্ধান করতে এই আদেশটি ব্যবহার করি:

this.props.location.query

এটি url- তে সমস্ত উপলব্ধ ক্যোয়ারী প্যারামগুলির একটি হ্যাশ তৈরি করে।

আপডেট (প্রতিক্রিয়া রাউটার ভি 4 +):

প্রতিক্রিয়া রাউটার 4-এ এই.প্রপ.লোকেশন.কোয়ারিকে মুছে ফেলা হয়েছে (বর্তমানে v4.1.1 ব্যবহার করে) সমস্যাটি সম্পর্কে এখানে আরও জানুন: https://github.com/ReactTraining/react-router/issues/4410

দেখে মনে হচ্ছে যে তারা ক্যোয়ারী প্যারামগুলি পার্স করার জন্য আপনার নিজের পদ্ধতিটি ব্যবহার করতে চান, বর্তমানে শূন্যস্থান পূরণ করতে এই লাইব্রেরিটি ব্যবহার করে: https://github.com/sindresorhus/query-string

Comments

আমি প্রতিক্রিয়া 0.14.8 দিয়ে পরীক্ষা করেছি এবং আপনার উত্তর রেন্ডারিংয়ে কাজ করে না: ত্রুটি TypeError: Cannot read property 'location' of undefined:: |

— টমাস মোডিনিয়াস

আরে @ থমাস মডিনিয়াস, এটিই কি আপনার রাউটারটি রেন্ডার করছে এমন শীর্ষ পিতামন্ডল উপাদান? বা এটি একটি শিশু উপাদান? যদি আমি সঠিকভাবে মনে রাখি তবে রাউটার যে রেন্ডারটি রেন্ডার করেছে তার থেকে আপনার সন্তানের উপাদানগুলিতে এই.প্রোপস.লোকেশন.কোয়ারিটি পাস করতে হবে, কেবলমাত্র আমি আমার মাথার উপরের অংশটি ভাবতে পারি।

— মার্শ

Answer 3

উপরের উত্তরগুলি কাজ করবে না react-router v4। সমস্যাটি সমাধান করার জন্য আমি এখানে যা করেছি -

প্রথম ইনস্টল করুন ক্যোয়ারী-স্ট্রিং যা পার্সিংয়ের জন্য প্রয়োজন।

npm install -save query-string

এখন রাউটেড উপাদানটিতে আপনি আন পার্স করা কোয়েরি স্ট্রিংটি এর মতো অ্যাক্সেস করতে পারবেন

this.props.location.search

আপনি কনসোলে লগ ইন করে এটি পরীক্ষা করে দেখতে পারেন।

অবশেষে ক্যোয়ারী প্যারামিটারগুলি অ্যাক্সেস করার জন্য বিশ্লেষণ করুন

const queryString = require('query-string');
var parsed = queryString.parse(this.props.location.search);
console.log(parsed.param); // replace param with your own 

সুতরাং যদি জিজ্ঞাসা মত হয় ?hello=world

console.log(parsed.hello) লগ হবে world

Comments

বা লিব ছাড়াই: const query = new URLSearchParams(props.location.search); console.log(query.get('hello'));(পুরানো ব্রাউজারগুলির জন্য পলিফিলের প্রয়োজন)।

— নিনাহ ফাম

আমি যখন অ্যাপ্লিকেশনটি তৈরি করব তখন এই কাজ করা উচিত, তাই না?

— ওয়াল্টার

Answer 4

আপডেট 2017.12.25

"react-router-dom": "^4.2.2"

ইউআরএল পছন্দ

BrowserHistory: http://localhost:3000/demo-7/detail/2?sort=name

HashHistory: http://localhost:3000/demo-7/#/detail/2?sort=name

সঙ্গে ক্যোয়ারী স্ট্রিং নির্ভরতা:

this.id = props.match.params.id;
this.searchObj = queryString.parse(props.location.search);
this.from = props.location.state.from;

console.log(this.id, this.searchObj, this.from);

ফলাফল:

2 {sort: "name"} home

---

"react-router": "^2.4.1"

ইউআর লাইক http://localhost:8080/react-router01/1?name=novaline&age=26

const queryParams = this.props.location.query;

ক্যোয়ারিপ্যারামস একটি অবজেক্টটিতে ক্যোয়ারী প্যারাম রয়েছে: {name: novaline, age: 26}

Comments

আপনার যদি এর মতো কিছু থাকে: http://localhost:8090/#access_token=PGqsashgJdrZoU6hV8mWAzwlXkJZO8ImDcn&expires_in=7200&token_type=bearer(অর্থাত্‍ /পরে নেই #) তারপরে location.hashlocation.search

— রিঅ্যাক্ট

Answer 5

স্ট্রিংকয়েরি প্যাকেজ সহ:

import qs from "stringquery";

const obj = qs("?status=APPROVED&page=1limit=20");  
// > { limit: "10", page:"1", status:"APPROVED" }

ক্যোয়ারী-স্ট্রিং প্যাকেজ সহ:

import qs from "query-string";
const obj = qs.parse(this.props.location.search);
console.log(obj.param); // { limit: "10", page:"1", status:"APPROVED" } 

প্যাকেজ নেই:

const convertToObject = (url) => {
  const arr = url.slice(1).split(/&|=/); // remove the "?", "&" and "="
  let params = {};

  for(let i = 0; i < arr.length; i += 2){
    const key = arr[i], value = arr[i + 1];
    params[key] = value ; // build the object = { limit: "10", page:"1", status:"APPROVED" }
  }
  return params;
};


const uri = this.props.location.search; // "?status=APPROVED&page=1&limit=20"

const obj = convertToObject(uri);

console.log(obj); // { limit: "10", page:"1", status:"APPROVED" }


// obj.status
// obj.page
// obj.limit

আশা করি এইটি কাজ করবে :)

শুভ কোডিং!

Answer 6

"react-router-dom": "^5.0.0",

আপনাকে কেবলমাত্র আপনার উপাদানটিতে কোনও অতিরিক্ত মডিউল যুক্ত করার দরকার নেই যা এর মতো একটি url ঠিকানা রয়েছে:

http: // লোকালহোস্ট: 3000 / # /? কর্তৃপক্ষ '

আপনি নিম্নলিখিত সহজ কোড চেষ্টা করতে পারেন:

    const search =this.props.location.search;
    const params = new URLSearchParams(search);
    const authority = params.get('authority'); //

Answer 7

অন্যান্য উত্তরগুলি পড়ার পরে (প্রথমে @ ডানকান-ফিনি এবং তারপরে @ মারার্স দ্বারা) আমি পরিবর্তনের লগটি বের করতে বেরিয়েছি যা এটি সমাধান করার আইডেম্যাটিক রিঅ্যাক্ট-রাউটার ২.x উপায় ব্যাখ্যা করে। অবস্থান ব্যবহার করে উপর ডকুমেন্টেশন (যা আপনি জিজ্ঞাসার জন্য প্রয়োজন) উপাদান আসলে প্রকৃত কোড দ্বারা অসঙ্গতি করা হয়। সুতরাং আপনি যদি তাদের পরামর্শ অনুসরণ করেন তবে আপনি এরকম বড় ক্রোধের সতর্কতা পান:

Warning: [react-router] `context.location` is deprecated, please use a route component's `props.location` instead.

দেখা যাচ্ছে যে অবস্থানের ধরণটি ব্যবহার করে এমন কোনও প্রাসঙ্গিক সম্পত্তি আপনার কাছে থাকতে পারে না। তবে আপনি লোকাল নামক একটি প্রসঙ্গ সম্পত্তি ব্যবহার করতে পারেন যা অবস্থানের ধরণটি ব্যবহার করে। সুতরাং সমাধানটি নিম্নরূপে তাদের উত্সটিতে একটি ছোট পরিবর্তন রয়েছে:

const RouteComponent = React.createClass({
    childContextTypes: {
        loc: PropTypes.location
    },

    getChildContext() {
        return { location: this.props.location }
    }
});

const ChildComponent = React.createClass({
    contextTypes: {
        loc: PropTypes.location
    },
    render() {
        console.log(this.context.loc);
        return(<div>this.context.loc.query</div>);
    }
});

আপনি আপনার বাচ্চাদের যে অবস্থানের অবজেক্টটি চান তার কেবলমাত্র সেই অংশগুলিই পার করতে পারেন একই সুবিধা পেতে। এটি অবজেক্টের ধরণে পরিবর্তনের সতর্কতা পরিবর্তন করে নি। আশা করি এইটি কাজ করবে.

Answer 8

সাধারণ জেএস সমাধান:

queryStringParse = function(string) {
    let parsed = {}
    if(string != '') {
        string = string.substring(string.indexOf('?')+1)
        let p1 = string.split('&')
        p1.map(function(value) {
            let params = value.split('=')
            parsed[params[0]] = params[1]
        });
    }
    return parsed
}

এবং আপনি যে কোনও জায়গা থেকে এটি ব্যবহার করে কল করতে পারেন:

var params = this.queryStringParse(this.props.location.search);

আশাকরি এটা সাহায্য করবে.

Answer 9

ক্যোরি -স্ট্রিং মডিউলটি ব্যবহার করার সময় একটি অনুকূলিত উত্পাদন বিল্ড তৈরি করার সময় আপনি নিম্নলিখিত ত্রুটিটি পেতে পারেন ।

এই ফাইলটি থেকে কোড ছোট করতে ব্যর্থ: ./node_modules/query-string/index.js:8

এটি কাটিয়ে উঠতে, দয়া করে স্ট্রিংকোয়ারি নামক বিকল্প মডিউলটি ব্যবহার করুন যা বিল্ডটি চালানোর সময় কোনও সমস্যা ছাড়াই একই প্রক্রিয়াটি ভালভাবে চালায়।

import querySearch from "stringquery";

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