প্রতিক্রিয়া - কীভাবে স্ট্রিং থেকে প্যারামিটারের মান পাবেন

Question

__firebase_request_keyতাদের সার্ভারগুলি থেকে পুনঃনির্দেশের পরে টুইটারের একক চিহ্ন দ্বারা উত্পন্ন কোনও URL থেকে প্যারামিটার মান ক্যাপচার করতে আমি আমার রুটস.জেএসএক্স ফাইলের কোনও রুটকে কীভাবে সংজ্ঞায়িত করতে পারি ?

http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla

আমি নিম্নলিখিত রুটগুলির কনফিগারেশন দিয়ে চেষ্টা করেছি, তবে :redirectParamএটি উল্লিখিত প্যারামটি ধরছে না:

<Router>
  <Route path="/" component={Main}>
    <Route path="signin" component={SignIn}>
      <Route path=":redirectParam" component={TwitterSsoButton} />
    </Route>
  </Route>
</Router>

Comments

এখানে একটি

— গিথুব

দুর্ভাগ্যজনক যে প্রশ্নটি "ক্যোয়ারী স্ট্রিংস" বলছে তবে আসলে "ইউআরএল প্যারামিটার" সম্পর্কে জিজ্ঞাসা করছে

— সানএমসি

query strings"? var1 = ভাল এবং var2 = ভাল 2" url paramters,: "/ ফটো /: কোম্পানীডি / নতুন"

— ম্যাডডকস

Answer 1

প্রতিক্রিয়া রাউটার v3

প্রতিক্রিয়া রাউটার ইতিমধ্যে আপনার জন্য অবস্থানটি বিশ্লেষণ করে এবং প্রপস হিসাবে এটি আপনার রুট কম্পোনেন্টে প্রেরণ করে । আপনি কোয়েরিটি (ইউআরএল পরে?) অংশের মাধ্যমে অ্যাক্সেস করতে পারেন

this.props.location.query.__firebase_request_key

আপনি যদি রাউটারের ভিতরে কোলন (:) দিয়ে পৃথক করা পাথের প্যারামিটার মানগুলি সন্ধান করছেন তবে এগুলি মাধ্যমে অ্যাক্সেসযোগ্য

this.props.match.params.redirectParam

এটি দেরী রিঅ্যাক্ট রাউটার ভি 3 সংস্করণে প্রযোজ্য (কোনটি নিশ্চিত নয়)। পুরানো রাউটার সংস্করণগুলি ব্যবহারের জন্য জানা গেছে this.props.params.redirectParam।

জেনেরিক, রাউটার ভি 4 এবং প্রতিক্রিয়া রাউটার ভি 5

প্রতিক্রিয়া রাউটার ভি 4 আপনার জন্য ক্যোয়ারীটিকে আর পার্স করে না, তবে আপনি কেবল এটির মাধ্যমে অ্যাক্সেস করতে পারবেন this.props.location.search। কারণগুলির জন্য দেখুন নবুচাতের উত্তর ।

যেমন Qs লাইব্রেরি সহ qsআপনি যেমন করতে পারেন তেমন আমদানি

qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key

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

new URLSearchParams(this.props.location.search).get("__firebase_request_key")

ক্রিয়ামূলক উপাদানগুলির জন্য আপনি this.props.locationহুক ব্যবহারের স্থানটি প্রতিস্থাপন করবেন । দ্রষ্টব্য, আপনি ব্যবহার করতে পারেন window.location.search, কিন্তু এটি পরিবর্তনগুলির উপর প্রতিক্রিয়া রেন্ডারিং ট্রিগার করতে দেবে না। যদি আপনার (অ-কার্যক্ষম) উপাদানটি সরাসরি বাচ্চা না হয় তবে Switchআপনার সাথে রউটার ব্যবহার করা দরকার হয় তবে রাউটার প্রদত্ত যে কোনও অ্যাক্সেস ।

সাধারণ

nizam.sp এর পরামর্শ

console.log(this.props)

যে কোনও ক্ষেত্রে সহায়ক হবে।

Comments

এটির জন্য প্রতিক্রিয়া রাউটারটি পরিবর্তন করার দরকার নেই।

— খ্রিস্টান

আমি সতর্কতা নোটেরconsole.dir() কারণে ব্যবহার করার পরামর্শ দেব না ... কমপক্ষে :)

— বোল্ডনিক

ঠিক আছে, এটি একবারে সামগ্রীগুলি দেখার জন্য। আপনি একটি ব্রেক পয়েন্টও রেখে দিতে পারেন এবং ডিবাগারে এই.প্রজনাগুলির মূল্যায়ন করতে পারেন। আজকাল, এমনকি কনসোল.লগ কাজটি করবে (কমপক্ষে ক্রোমে আপনি এর মতো মুদ্রিত মানগুলি প্রসারিত করতে পারেন) - এমনকি কনসোল.লগ উত্পাদনে ব্যবহার করার মতো কিছুই নয়।

— খ্রিস্টান

@ খ্রিস্টিয়ান আমি কেবল সরল জাভাস্ক্রিপ্ট ব্যবহার করে শেষ করেছি। কনস্ট পাথ = window.location.pathname; আমাকে ইউআরএল দেয়। তারপরে আমি এটি আমার প্রয়োজন মতো পার্স করতে পারি। আমি এটিকে আমার প্রতিক্রিয়া উপাদানটিতে উপাদানওয়ালমাউন্ট জীবনচক্র ইভেন্টে রেখেছি।

— স্যাম

ইন react-router-domআমি ব্যবহার করতে হয়েছে withRouterএই কাজ করুন!

— দৈত্যবাদী

Answer 2

প্রতিক্রিয়া রাউটার v4

ব্যবহার component

<Route path="/users/:id" component={UserPage}/> 

this.props.match.params.id

উপাদানটি স্বয়ংক্রিয়ভাবে রুট প্রপসের সাথে রেন্ডার হয়।

ব্যবহার render

<Route path="/users/:id" render={(props) => <UserPage {...props} />}/> 

this.props.match.params.id

রুট প্রপসগুলি রেন্ডার ফাংশনে পাস করা হয়।

Comments

query paramsরিঅ্যাক্ট রাউটার ভি 4 ব্যবহার করে আমার সন্তানের উপাদানগুলিতে আমার অ্যাপ্লিকেশনটির বর্তমান ইউআরএলটি অ্যাক্সেস করার একই ধরণের সমস্যা হয়েছিল। আপনি যদি সন্ধান করছেন query params, প্রতিক্রিয়া রাউটার 4 এর এই.প্রোপস.লোকেশন.কোয়ারিটি সরানো হয়েছে (বর্তমানে v4.1.1 ব্যবহার করছে)। এই উত্তরটি দেখুন: stackoverflow.com/a/43630848/1508105

— অ্যালেক্স জনসন

দুর্ভাগ্যক্রমে এটি প্রশ্নের উত্তর দেয় না কারণ আপনার অগত্যা হবে না /users/?q=...তবে আপনি থাকতে পারতেন /user?q=...। আপনার this.props.location.searchপ্রতিক্রিয়া রাউটার ভি 4 এ ব্যবহার করা উচিত এবং নীচের আমার উত্তরে বর্ণিত ফলাফলগুলি নিজেই পার্স করা উচিত ।

— nbeuchat

এটা সঠিক উত্তর. this.props.location.searchএটির অস্তিত্ব নেই.

— নিকজ

@ নিকজে: আপনি বিক্রিয়া রাউটারটির কোন সংস্করণ ব্যবহার করেন?

— nbeuchat

Answer 3

প্রতিক্রিয়া রাউটার v3

প্রতিক্রিয়া রাউটার ভি 3 এর সাহায্যে আপনি this.props.location.search(? কিউএস 1 = নাইসরগ এবং কিউএস 2 = পারমার) থেকে কোয়েরি-স্ট্রিং পেতে পারেন । উদাহরণস্বরূপ, সঙ্গে let params = queryString.parse(this.props.location.search), দিতে হবে{ qs1 : 'naisarg', qs2 : 'parmar'}

প্রতিক্রিয়া রাউটার v4

প্রতিক্রিয়া রাউটার v4 দিয়ে, এর this.props.location.queryআর অস্তিত্ব নেই। this.props.location.searchপরিবর্তে আপনাকে ব্যবহার করতে হবে এবং কোয়েরি প্যারামিটারগুলি নিজের দ্বারা বা কোনও বিদ্যমান প্যাকেজ যেমন ব্যবহার করে পার্স করতে হবে query-string।

উদাহরণ

প্রতিক্রিয়া রাউটার ভি 4 এবং query-stringগ্রন্থাগারটি ব্যবহার করে এখানে একটি ন্যূনতম উদাহরণ ।

import { withRouter } from 'react-router-dom';
import queryString from 'query-string';

class ActivateAccount extends Component{
    someFunction(){
        let params = queryString.parse(this.props.location.search)
        ...
    }
    ...
}
export default withRouter(ActivateAccount);

যুক্তিসঙ্গত

queryসম্পত্তি অপসারণের জন্য প্রতিক্রিয়া রাউটারের দলটি যুক্তিযুক্ত :

বেশ কয়েকটি জনপ্রিয় প্যাকেজ রয়েছে যা কোয়েরি স্ট্রিংকে পার্সিং / স্ট্রিংফাইয়ে কিছুটা আলাদাভাবে করে এবং এই তফাতগুলির প্রতিটিটি হয়ত কিছু ব্যবহারকারীর জন্য "সঠিক" উপায় এবং অন্যদের জন্য "ভুল" হতে পারে। যদি প্রতিক্রিয়া রাউটারটি "ডান "টিকে বেছে নিয়ে থাকে তবে এটি কেবলমাত্র কিছু লোকের পক্ষে সঠিক। তারপরে, অন্যান্য ব্যবহারকারীদের তাদের পছন্দের ক্যোয়ারী পার্সিং প্যাকেজটিতে বিকল্পের জন্য একটি উপায় যুক্ত করতে হবে। রিঅ্যাক্ট রাউটার দ্বারা অনুসন্ধানের স্ট্রিংয়ের অভ্যন্তরীণ কোনও ব্যবহার নেই যা এর জন্য মূল-মান জোড়াটি পার্স করার প্রয়োজন হয়, সুতরাং এর মধ্যে কোনটি "ডান" হওয়া উচিত তা চয়ন করার দরকার নেই।

[...]

৪.০-এর জন্য গ্রহণ করা পদ্ধতিটি হ'ল সমস্ত "ব্যাটারি অন্তর্ভুক্ত" ধরণের বৈশিষ্ট্যগুলি সরিয়ে ফেলা এবং কেবলমাত্র বেসিক রাউটিংয়ে ফিরে আসা। আপনার যদি ক্যোয়ারিং স্ট্রিং পার্সিং বা অ্যাসিঙ্ক লোডিং বা রেডাক্স ইন্টিগ্রেশন বা খুব নির্দিষ্ট নির্দিষ্ট কিছু দরকার হয় তবে আপনি বিশেষত আপনার ব্যবহারের ক্ষেত্রে এটি একটি লাইব্রেরির সাথে যুক্ত করতে পারেন। কম ক্রাফ্ট এমনভাবে প্যাক করা আছে যাতে আপনার প্রয়োজন হয় না এবং আপনি আপনার নির্দিষ্ট পছন্দ এবং প্রয়োজনগুলিতে জিনিসগুলি কাস্টমাইজ করতে পারেন।

গিটহাবের উপর আপনি পুরো আলোচনাটি খুঁজে পেতে পারেন ।

Comments

পুরোপুরি কাজ করে। গ্রীষ্ম 2018 হিসাবে এটি গ্রহণযোগ্য উত্তর হওয়া উচিত

— এমএমলা

আপনি যখন ইউআরএলস অনুসন্ধানপ্যারামগুলি ব্যবহার করতে পারেন তখন আপনার কেন একটি স্ত্রীর প্রয়োজন হয়

— সুপারউবারডুপার

এজ এবং আইওএস সাফারির কারণে @ সুপারউবারডুপার - বিকাশকারী.মোজিলা.আর.ইন

— ব্রায়ান বার্নস

অবশ্যই, তবে কেবল ইউআরএল সার্চপ্যারামস পলিফিল ব্যবহার করুন

— অ্যান্টনি ম্যানিং-ফ্র্যাঙ্কলিন

Answer 4

আমি যতদূর জানি তিনটি পদ্ধতি রয়েছে যে আপনি এটি করতে পারেন।

1. কোয়েরি স্ট্রিং পেতে নিয়মিত অভিব্যক্তিটি ব্যবহার করুন।

2.আপনি ব্রাউজারটি ব্যবহার করতে পারেন। চিত্রটি বর্তমান ইউআরএলটির মতো:

http://www.google.com.au?token=123

আমরা কেবল 123 পেতে চাই;

প্রথম

 const query = new URLSearchParams(this.props.location.search);

তারপর

const token = query.get('token')
console.log(token)//123

৩. 'কোয়েরি-স্ট্রিং' নামে একটি তৃতীয় গ্রন্থাগার ব্যবহার করুন। প্রথমে এটি ইনস্টল করুন

npm i query-string

তারপরে এটি বর্তমান জাভাস্ক্রিপ্ট ফাইলটিতে আমদানি করুন:

 import queryString from 'query-string'

পরবর্তী পদক্ষেপটি বর্তমান ইউআরএলে 'টোকেন' পাওয়া, নিম্নলিখিতটি করুন:

const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log('token',token)//123

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

25/02/2019 এ আপডেট হয়েছে

4. যদি বর্তমান ইউআরএলটি নীচের মত দেখাচ্ছে:

http://www.google.com.au?app=home&act=article&aid=160990

পরামিতিগুলি পেতে আমরা একটি ফাংশন সংজ্ঞায়িত করি:

function getQueryVariable(variable)
{
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = query.split("&");
        console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
        for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
        if(pair[0] == variable){return pair[1];}
         }
         return(false);
}

আমরা এর মাধ্যমে 'সহায়তা' পেতে পারি:

getQueryVariable('aid') //160990

Comments

ইউআরএল সার্চপ্যারামগুলি আইই দ্বারা সমর্থিত নয় (যদি এটি কারওর জন্য প্রাসঙ্গিক হয় তবে :)

— খ্রিস্টান

@ ক্রিশ্চিয়ান টিপিক্যাল আইই

— ট্রেভর উড

Answer 5

প্রতিক্রিয়া রাউটার ভি 4 এর আর props.location.query অবজেক্ট নেই ( গিথাব আলোচনা দেখুন)। সুতরাং গৃহীত উত্তর নতুন প্রকল্পগুলির জন্য কাজ করবে না।

ভি 4 এর সমাধান একটি বাইরের লাইব্রেরি ব্যবহার করা পার্স করার জন্য কোয়েরি-স্ট্রিং ব্যবহার করাprops.location.search

const qs = require('query-string');
//or
import * as qs from 'query-string';

console.log(location.search);
//=> '?foo=bar'

const parsed = qs.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}

Comments

আমার জন্য কিছু কারণে qs.parse ফলাফলের ফলাফল:{'?foo': 'bar'}

— ক্রিস

@ ক্রিস var prefixed = qs.parse('?a=b&c=d', { ignoreQueryPrefix: true });এটি ঠিক করা উচিত। উদাহরণ পাওয়া যায় এখানে: github.com/ljharb/qs

— অ্যালান শাপপিরা

Answer 6

প্রতিক্রিয়া হুক ব্যবহার করার সময় অ্যাক্সেসের কোনও অ্যাক্সেস নেই this.props.location। Url পরামিতি ক্যাপচার করতে windowঅবজেক্ট ব্যবহার করুন use

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

Comments

এটি একটি দুর্দান্ত উত্তর। ধন্যবাদ.

— লুকভেন্টার

একই ফলাফল অর্জনের জন্য আপনি উইন্ডো অবজেক্টের পরিবর্তে "রিঅ্যাক্ট-রাউটার-ডোম" থেকে "ইউজলোকেশন" ব্যবহার করতে পারেন।

— চসমাটু

URLSearchParams ইন্টারনেট দ্বারা সমর্থিত নয় developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/...

— মাইকেল Freidgeim

অতিরিক্তভাবে, উইন্ডো.লোকশন অ্যাক্সেস করা পরিবর্তনগুলির প্রতিক্রিয়াটির পুনঃ-রেন্ডার ট্রিগার করতে দেয় না।

— খ্রিস্টান

Answer 7

প্রতিক্রিয়া রাউটার v4

const urlParams = new URLSearchParams(this.props.location.search)
const key = urlParams.get('__firebase_request_key')

দয়া করে মনে রাখবেন এটি বর্তমানে পরীক্ষামূলক।

ব্রাউজারের সামঞ্জস্যতা এখানে চেক করুন: https://developer.mozilla.org/en-US/docs/Web/API/URLShopParams/URLShopParams# ব্রাউজার_সংশ্লিষ্টতা

Comments

দুর্দান্ত সমাধান তবে দুর্ভাগ্যক্রমে আইই সমর্থন করে না ((

— আন্দ্রে প্যাটসাইকো

@ আন্ড্রেপ্যাটসাইকো সেই গিথুব

— ওয়েবে

Answer 8

আপনি সহজেই, প্রতিক্রিয়া-রাউটারটি পরীক্ষা করতে পারেন , আপনি যতক্ষণ আপনার রাউটারটিতে সংজ্ঞায়িত করেছেন ততক্ষণ আপনি কোয়েরি প্যারামিটার পেতে কোডটি ব্যবহার করতে পারেন:

this.props.params.userId

Comments

এটি ওপির ক্ষেত্রে সঠিক উত্তর নয় । props.paramsইউআরএল প্যারামগুলির জন্য (ইউআরএল বিভাগটি ':' এর সাথে রিঅ্যাক্ট রাউটারে উপসর্গযুক্ত), props.location.queryকোয়েরি স্ট্রিং প্যারামগুলি সঞ্চয় করে ('?' এর পরে) এবং ওপি যা চায় তা তাই।

— ম্যাথিউ হার্লি

Answer 9

প্রতিক্রিয়া রাউটার 5.1+

5.1 বিভিন্ন হুকের প্রবর্তন করেছিল useLocationএবং useParamsএটি এখানে ব্যবহারযোগ্য হতে পারে।

উদাহরণ:

<Route path="/test/:slug" component={Dashboard} />

তারপরে যদি আমরা পরিদর্শন করি

http://localhost:3000/test/signin?_k=v9ifuf&__firebase_request_key=blablabla

আপনি এটি পছন্দ করতে পারে

import { useLocation } from 'react-router';
import queryString from 'query-string';

const Dashboard: React.FC = React.memo((props) => {
    const location = useLocation();

    console.log(queryString.parse(location.search));

    // {__firebase_request_key: "blablabla", _k: "v9ifuf"}

    ...

    return <p>Example</p>;
}

Answer 10

আপনার রাউটারটি যদি এটির মতো হয়

<Route exact path="/category/:id" component={ProductList}/>

আপনি এই আইডি পাবেন

this.props.match.params.id

Comments

কেউ কীভাবে জানেন যে এটি কীভাবে প্রতিক্রিয়া রাউটার 5.0.1 এ কাজ করে? this.props.match.params সর্বদা খালি থাকে।

— মার্ক এ তাগলিয়াফেরো

@ মার্কা.টাগলিয়াফেরো এই প্রোপটি কেবলমাত্র একটি রুট দ্বারা রেন্ডার করা উপাদানগুলিতেই উপলভ্য। যদি এটি আপনার উপাদানটির ক্ষেত্রে না হয় তবে আপনি নিজের উপাদানটি রাউটার এইচওকে মোড়ক দিয়ে এগুলি অ্যাক্সেস করতে পারেন।

— জিমি লংলি

Answer 11

এই ওয়ান-লাইনারের সাহায্যে আপনি এটিকে সরল জাভাস্ক্রিপ্ট সহ প্রতিক্রিয়া হুক এবং প্রতিক্রিয়া শ্রেণি উভয় ক্ষেত্রে যে কোনও জায়গায় ব্যবহার করতে পারেন।

https://www.hunterisgod.com/?city=Leipzig

let city = (new URLSearchParams(window.location.search)).get("city")

Answer 12

যদি আপনি এটি না পেয়ে থাকেন this.props... আপনি অন্যান্য উত্তরের উপর ভিত্তি করে প্রত্যাশা করছেন, আপনার ব্যবহারের প্রয়োজন হতে পারে withRouter( ডক্স ভি 4 ):

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux terminology) to the router.  
const TwitterSsoButton = withRouter(ShowTheLocation)  

// This gets around shouldComponentUpdate
withRouter(connect(...)(MyComponent))

// This does not
connect(...)(withRouter(MyComponent))

Answer 13

এই সমস্যাটি সমাধান করতে আমার খুব কষ্ট হয়েছিল। উপরের কোনও কাজ না করে আপনি পরিবর্তে এটি চেষ্টা করতে পারেন। আমি তৈরি-প্রতিক্রিয়া-অ্যাপ ব্যবহার করছি

আবশ্যকতা

প্রতিক্রিয়া-রাউটার-ডোম ":" ^ 4.3.1 "

সমাধান

যে স্থানে রাউটার নির্দিষ্ট করা আছে At

<Route path="some/path" ..../>

আপনি যে প্যারামিটারের নামটি এইভাবে পাস করতে চান তা যুক্ত করুন

<Route path="some/path/:id" .../>

আপনি যে পৃষ্ঠায় কিছু / পথ রেন্ডার করছেন সেখানে আপনি প্যারামিটারের নাম কল আইডি দেখতে এটি নির্দিষ্ট করতে পারেন

componentDidMount(){
  console.log(this.props);
  console.log(this.props.match.params.id);
}

আপনি যেখানে ডিফল্ট রফতানি করেন সেই শেষে

export default withRouter(Component);

আমদানি অন্তর্ভুক্ত মনে রাখবেন

import { withRouter } from 'react-router-dom'

যখন কনসোল.লগ (এটি.প্রপস) আপনি যা পেরেছেন তা সক্ষম হবেন। আনন্দ কর!

Comments

এবং যদি RouteComponentProps<{id: number}>

— টাইপস্ক্রিপ্ট

আপনি কোথায় রুট কম্পোনেন্টপ্রোপস যুক্ত করবেন <{আইডি: সংখ্যা}> ??

— Choco

প্রপস টাইপ করুন = রুট কম্পোনেন্টপপস <{আইডি: সংখ্যা}>;

— pfeds

বর্গ MyClass প্রসারিত React.PureComponent <সাজসরঞ্জাম> {

— pfeds

তারপরে কম্পোনেন্টডিডমাউন্টে (উদাহরণস্বরূপ), কনস্ট মাইআইডি = this.prop.match.params.id;

— 18:38

Answer 14

React routerv4 এর পরে আর আপনাকে query paramsসরাসরি তার locationঅবজেক্টে দেয় না । কারণ হচ্ছে

বেশ কয়েকটি জনপ্রিয় প্যাকেজ রয়েছে যা কোয়েরি স্ট্রিংকে পার্সিং / স্ট্রিংফাইয়ে কিছুটা আলাদাভাবে করে এবং এই তফাতগুলির প্রতিটিটি হয়ত কিছু ব্যবহারকারীর জন্য "সঠিক" উপায় এবং অন্যদের জন্য "ভুল" হতে পারে। যদি প্রতিক্রিয়া রাউটারটি "ডান "টিকে বেছে নিয়ে থাকে তবে এটি কেবলমাত্র কিছু লোকের পক্ষে সঠিক। তারপরে, অন্যান্য ব্যবহারকারীদের তাদের পছন্দের ক্যোয়ারী পার্সিং প্যাকেজটিতে বিকল্পের জন্য একটি উপায় যুক্ত করতে হবে। রিঅ্যাক্ট রাউটার দ্বারা অনুসন্ধানের স্ট্রিংয়ের অভ্যন্তরীণ কোনও ব্যবহার নেই যা এর জন্য মূল-মান জোড়াটি পার্স করার প্রয়োজন হয়, সুতরাং এর মধ্যে কোনটি "ডান" হওয়া উচিত তা চয়ন করার দরকার নেই।

এটি অন্তর্ভুক্ত করার পরে, এটি কেবলমাত্র স্থানটি বিশ্লেষণ করার জন্য আরও তাত্পর্যপূর্ণ হবে your আপনার দেখার উপাদানগুলির মধ্যে অনুসন্ধান করুন যা কোনও কোয়েরি অবজেক্টের প্রত্যাশা করছে।

আপনি অগ্রাহ্য দ্বারা জেনেরিক এটা করতে পারেন withRouterথেকে react-routerমত

customWithRouter.js

import { compose, withPropsOnChange } from 'recompose';
import { withRouter } from 'react-router';
import queryString from 'query-string';

const propsWithQuery = withPropsOnChange(
    ['location', 'match'],
    ({ location, match }) => {
        return {
            location: {
                ...location,
                query: queryString.parse(location.search)
            },
            match
        };
    }
);

export default compose(withRouter, propsWithQuery)

Answer 15

componentDidMount(){
    //http://localhost:3000/service/anas
    //<Route path="/service/:serviceName" component={Service} />
    const {params} =this.props.match;
    this.setState({ 
        title: params.serviceName ,
        content: data.Content
    })
}

Comments

স্ট্যাক ওভারফ্লোতে স্বাগতম! দয়া করে কেবল উত্স কোড দিয়ে উত্তর দিবেন না। আপনার সমাধান কীভাবে কাজ করে সে সম্পর্কে একটি দুর্দান্ত বর্ণনা দেওয়ার চেষ্টা করুন। দেখুন: আমি কীভাবে ভাল উত্তর লিখব? । ধন্যবাদ

— সানুন ןɐ কিউপি

সম্ভবত একটি 'ডেটা' পেতে কোনও সংশোধিত সংজ্ঞা দেওয়া হয়নি

— টম স্টিকেল

Answer 16

কিছুটা দেরি হতে পারে তবে এই প্রতিক্রিয়া হুক আপনাকে ইউআরএল কোয়েরিতে মান নির্ধারণ / সেট করতে সহায়তা করতে পারে: https://github.com/rudyhuynh/use-url-search-params (আমার লেখা)।

এটি সাথে বা বাইরে কাজ করে react-router। নীচে আপনার ক্ষেত্রে কোড নমুনা দেওয়া আছে:

import React from "react";
import { useUrlSearchParams } from "use-url-search-params";

const MyComponent = () => {
  const [params, setParams] = useUrlSearchParams()
  return (
    <div>
      __firebase_request_key: {params.__firebase_request_key}
    </div>
  )
}

Comments

এত সহজ কিন্তু দুর্দান্ত হুক সরবরাহের জন্য আপনাকে অনেক ধন্যবাদ!

— chr1s

Answer 17

this.props.params.your_param_name কাজ করবে.

আপনার ক্যোয়ারী স্ট্রিং থেকে প্যারামগুলি পাওয়ার উপায় এটি। সমস্ত সম্ভাবনা অন্বেষণ করতে
দয়া করে console.log(this.props);।

Answer 18

যে উপাদানটিতে আপনি প্যারামিটারগুলি ব্যবহার করতে পারবেন তা অ্যাক্সেস করতে হবে

this.props.location.state.from.search

যা পুরো ক্যোয়ারী স্ট্রিংটি প্রকাশ করবে (চিহ্নটির পরে সমস্ত কিছু ?)

Answer 19

প্রতিক্রিয়া রাউটারে v4 শুধুমাত্র রউটের সাথে সঠিক উপায়

আপনি রাউটার উচ্চতর-অর্ডার উপাদানটির মাধ্যমে ইতিহাসের অবজেক্টের বৈশিষ্ট্য এবং নিকটতম ম্যাচের অ্যাক্সেস পেতে পারেন। উইথ রউটার যখনই রেন্ডার করে তখন মোড়ানো উপাদানগুলিতে আপডেট ম্যাচ, অবস্থান এবং ইতিহাসের প্রপস পাস করবে।

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

https://reacttraining.com/react-router/web/api/withRouter

Answer 20

আমি এর মতো ইউআরএল প্যারামিটারটি পার্স করতে কোয়েরি-স্ট্রিং নামে একটি বাহ্যিক প্যাকেজ ব্যবহার করেছি।

import React, {Component} from 'react'
import { parse } from 'query-string';

resetPass() {
    const {password} = this.state;
    this.setState({fetching: true, error: undefined});
    const query = parse(location.search);
    return fetch(settings.urls.update_password, {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'Authorization': query.token},
        mode: 'cors',
        body: JSON.stringify({password})
    })
        .then(response=>response.json())
        .then(json=>{
            if (json.error)
                throw Error(json.error.message || 'Unknown fetch error');
            this.setState({fetching: false, error: undefined, changePassword: true});
        })
        .catch(error=>this.setState({fetching: false, error: error.message}));
}

Answer 21

আপনি যখন প্রতিক্রিয়া রুট ডোমের সাথে কাজ করেন তখন মিলের জন্য অবজেক্টটি খালি করে দেয় তবে আপনি যদি নিম্নলিখিত কোডটি করেন তবে এটি এস 6 উপাদানটির পাশাপাশি এটি ফাংশন উপাদানটির জন্য সরাসরি কাজ করবে

import { Switch, Route, Link } from "react-router-dom";

<Route path="/profile" exact component={SelectProfile} />
<Route
  path="/profile/:profileId"
  render={props => {
    return <Profile {...props} loading={this.state.loading} />;
  }}
/>
</Switch>
</div>

এইভাবে আপনি প্রপস এবং ম্যাচ প্যারাম এবং প্রোফাইল আইডি পেতে পারেন

এটি এস component উপাদানটি নিয়ে অনেক গবেষণা করার পরে আমার পক্ষে কাজ করেছিল।

Answer 22

নিম্নলিখিত হিসাবে একটি url আছে বলুন

HTTP: // স্থানীয় হোস্ট: 3000 / কলব্যাক কোড = 6c3c9b39-de2f-3bf4-a542-3e77a64d3341

আমরা যদি সেই URL টি থেকে কোডটি বের করতে চাই তবে নীচের পদ্ধতিটি কার্যকর হবে।

const authResult = new URLSearchParams(window.location.search); 
const code = authResult.get('code')

Comments

ধন্যবাদ !! নিখুঁত উত্তর.

— তাহা ফারুকী

Answer 23

অথবা সম্ভবত এরকম কিছু?

let win = {
  'location': {
    'path': 'http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla'
  }
}
if (win.location.path.match('__firebase_request_key').length) {
  let key = win.location.path.split('__firebase_request_key=')[1]
  console.log(key)
}

Answer 24

আপনি বর্তমান অবস্থান থেকে অনুসন্ধানের প্যারামগুলি বের করার জন্য সহজ হুক তৈরি করতে পারেন:

import React from 'react';
import { useLocation } from 'react-router-dom';

export function useSearchParams<ParamNames extends string[]>(...parameterNames: ParamNames): Record<ParamNames[number], string | null> {
    const { search } = useLocation();
    return React.useMemo(() => { // recalculate only when 'search' or arguments changed
        const searchParams = new URLSearchParams(search);
        return parameterNames.reduce((accumulator, parameterName: ParamNames[number]) => {
            accumulator[ parameterName ] = searchParams.get(parameterName);
            return accumulator;
        }, {} as Record<ParamNames[number], string | null>);
    }, [ search, parameterNames.join(',') ]); // join for sake of reducing array of strings to simple, comparable string
}

তাহলে আপনি এটিকে আপনার কার্যকরী উপাদানগুলির মধ্যে এটি ব্যবহার করতে পারেন:

// current url: http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
const { __firebase_request_key } = useSearchParams('__firebase_request_key');

// current url: http://localhost:3000/home?b=value
const searchParams = useSearchParameters('a', 'b'); // {a: null, b: 'value'}

Answer 25

export class ClassName extends Component{
      constructor(props){
        super(props);
        this.state = {
          id:parseInt(props.match.params.id,10)
        }
    }
     render(){
        return(
          //Code
          {this.state.id}
        );
}

Answer 26

let data = new FormData();
data.append('file', values.file);

Answer 27

---

সবচেয়ে সহজ সমাধান!

রাউটিংয়ে:

   <Route path="/app/someUrl/:id" exact component={binder} />

প্রতিক্রিয়া কোডে:

componentDidMount() {
    var id = window.location.href.split('/')[window.location.href.split('/').length - 1];
    var queryString = "http://url/api/controller/" + id
    $.getJSON(queryString)
      .then(res => {
        this.setState({ data: res });
      });
  }