প্রতিক্রিয়া রাউটারে একই উপাদানটির জন্য একাধিক পাথের নাম

Question

আমি তিনটি ভিন্ন রুটের জন্য একই উপাদানটি ব্যবহার করছি:

<Router>
    <Route path="/home" component={Home} />
    <Route path="/users" component={Home} />
    <Route path="/widgets" component={Home} />
</Router>

এটির মতো একত্রিত করার মতো উপায় আছে কি:

<Router>
    <Route path=["/home", "/users", "/widgets"] component={Home} />
</Router>

Comments

অ্যাকশন-রাউটার ৪.৪.০ অনুসারে, আপনি এখন আপনার পরামর্শের মতো একটি পদ্ধতিতে পাথের অ্যারে নির্দিষ্ট করতে পারেন। আমার উত্তর এখানে দেখুন ।

— বেন স্মিথ

Answer 1

রিঅ্যাক্ট -রাউটার হিসাবে v4.4.0-beta.4 , এবং সরকারীভাবে v5.0.0 এ, আপনি এখন এমন একটি পাথের অ্যারে নির্দিষ্ট করতে পারেন যা কোনও উপাদান হিসাবে সমাধান করে যেমন

<Router>
    <Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>

অ্যারের প্রতিটি পাথ একটি নিয়মিত প্রকাশের স্ট্রিং।

এই পদ্ধতির জন্য ডকুমেন্টেশন এখানে পাওয়া যাবে ।

Comments

আমি বিশ্বাস করি এটিই সেরা উত্তর। @ ক্যামেরনের জবাব যাইহোক যাইহোক সম্পূর্ণ রিজেক্সপ বৈশিষ্ট্য সমর্থন করে না (কমপক্ষে আমি এটি করতে সক্ষম হইনি)।

— ক্রিস্টোফার রেগনার 23'19

আমি কীভাবে exactএকক পথের জন্য বৈশিষ্ট্যটি সেট করব ?

— জুলিয়ানসোটো

@ জুলিয়ানসোটো সঠিক পথের সাথে একটি একক পথ দিয়ে একটি উপাদানকে একটি রুট তৈরি করুন। তারপরে আপনি সঠিক বৈশিষ্ট্য ছাড়াই পাথের অ্যারে দিয়ে একই উপাদানটিতে অন্য একটি রুট তৈরি করতে পারেন।

— বেন স্মিথ

আমি yarn upgrade4.3 থেকে 4.4 পর্যন্ত পারি না । এটি কি সরকারীভাবে মুক্তি পেয়েছে?

— ndtreviv

@ndtreviv প্রতিক্রিয়াশীল রাউটার পরিবর্তনের লগটি দেখে আমি দেখতে পাচ্ছি বৈশিষ্ট্যটি v4.4.0 বিটা 4 এ প্রবর্তিত হয়েছিল I'd আমি সর্বশেষ সংস্করণে আপগ্রেড করার পরামর্শ দিচ্ছি, যা এটি লেখার সময় v5.5.0 হয় is আপনি এই চলমান "সুতা আপগ্রেড রিঅ্যাক্ট-রাউটার --latest" করতে পারেন

— বেন স্মিথ

Answer 2

কমপক্ষে প্রতিক্রিয়া-রাউটার ভি 4 এর সাহায্যে এটি pathনিয়মিত এক্সপ্রেশন স্ট্রিং হতে পারে, সুতরাং আপনি এরকম কিছু করতে পারেন:

<Router>
    <Route path="/(home|users|widgets)/" component={Home} />
</Router>

আপনি দেখতে পাচ্ছেন এটি কিছুটা ভার্বোজ তাই আপনার component/ routeযদি এর মতো সহজ হয় তবে এটি সম্ভবত মূল্যবান নয়।

এবং অবশ্যই যদি এটি প্রায়শই আসে তবে আপনি সর্বদা একটি মোড়কের উপাদান তৈরি করতে পারতেন pathsযা অ্যারে প্যারামিটারে নিয়ে যায়, যা .mapরেজেেক্স বা যুক্তি পুনরায় ব্যবহার করে।

Comments

দুর্দান্ত ধারণা @ ক্যামেরন। আমি কেবলমাত্র গ্রুপগুলির মধ্যে একটির সাথে শুরু হওয়া পথগুলির সাথে মেলে এটি কিছুটা সংশোধন করা দরকারী বলে মনে করি: /^\/(home|users|widgets)/ এখন, /widgetsমিলবে তবে /dashboard/widgetsমিলবে না।

— টোলার

মহান হতে হবে, কিন্তু এখন জন্য টাইপ Regex না হয়ে ঠেকনা-ধরনের বৈধতা বৈধ: Warning: Failed prop type: Invalid prop ধরনের path` regexpসরবরাহ Route, প্রত্যাশিত string.`

— ফ্যাবিও Paiva

@ ফ্যাবিওপাইভা হ্যাঁ, আমি এখনও রুটে কীভাবে একটি স্বেচ্ছাসেবক রেজেক্স লাগাতে পারি তা বুঝতে পারি নি

— আটাভ 32

এটিকে একটি স্ট্রিং হিসাবে <Route path="/(new|edit)/user/:id?" ... />

— রাখুন

সাথে কাজ করছেন নাpath={`/(${ROUTES.HOME}|${ROUTES.HOME_1})/`}

— মুর্তজা হুসেন

Answer 3

আমি মনে করি না যে আপনি যদি ভি 4 এর চেয়ে কম প্রতিক্রিয়া রাউটারের কোনও সংস্করণ ব্যবহার করেন।

আপনি mapঅন্য কোনও জেএসএক্স উপাদানটির সাথে যেমন ব্যবহার করতে পারেন তেমন ব্যবহার করতে পারেন :

<Router>
    {["/home", "/users", "/widgets"].map((path, index) => 
        <Route path={path} component={Home} key={index} />
    )}
</Router>

সম্পাদনা

পাথ-টু-রেজিএক্সপ্যাকের দ্বারা সমর্থিত হওয়া পর্যন্ত আপনি বিক্রিয়া-রাউটার ভি 4-তে পাথের জন্য একটি রেজেক্স ব্যবহার করতে পারেন । আরও তথ্যের জন্য @ ক্যামেরনের উত্তর দেখুন।

Comments

keyপ্রপ ভুলে যাবেন না

— নিউরোট্রান্সমিটার

নথির ফলে (অনাকাঙ্ক্ষিত ...?) পুনরুদ্ধারগুলির কারণ হয়ে উঠবে (উদাহরণস্বরূপ / হোম => / ব্যবহারকারীদের মধ্যে)

— হার্টজেল গিনেস

প্রকৃতপক্ষে! আকাঙ্ক্ষা সম্ভবত আপনার ব্যবহারের ক্ষেত্রে এবং আপনার উপাদানগুলির উপর নির্ভর করে। আপনি যদি পুনঃমাউন্ট করতে না চান তবে আমার সম্পাদনায় উল্লিখিত রেজি এক্সপ ব্যবহার করা আরও ভাল কাজ করতে পারে।

— ক্রিস্টোফার চিচে

Answer 4

অন্যান্য বিকল্প: রুট প্রিফিক্স ব্যবহার করুন। /pagesউদাহরণ স্বরূপ. তুমি পাবে

• /pages/home
• /pages/users
• /pages/widgets

এবং তারপরে এটি Homeউপাদানটির ভিতরে বিশদভাবে সমাধান করুন ।

<Router>
  <Route path="/pages/" component={Home} />
</Router>

Answer 5

প্রতিক্রিয়া-রুট-ডোম ভি 5.1.2 হিসাবে আপনি নীচের মতো একাধিক পাথ পাস করতে পারেন

 <Route path={"/home" | "/users" | "/widgets"} component={Home} />

এবং আপত্তিজনকভাবে আপনাকে শীর্ষে হোম জেএসএক্স ফাইলটি আমদানি করতে হবে।

Answer 6

রিঅ্যাক্ট রাউটার ডক্স অনুসারে প্রপটিপ 'পাথ' টাইপ স্ট্রিংয়ের হয়। সুতরাং রুট কম্পোনেন্টে প্রপস হিসাবে কোনও অ্যারে পাস করার উপায় নেই।

যদি আপনার উদ্দেশ্যটি কেবল রুট পরিবর্তন করা হয় তবে আপনি একই রুটটিকে বিভিন্ন রুটের জন্য ব্যবহার করতে পারেন এতে কোনও সমস্যা নেই

Comments

এই উত্তরটি আর সঠিক নয় কারণ পাথ এখন স্ট্রিংয়ের একটি অ্যারে গ্রহণ করে। এই উত্তর দেখুন ।

— বেন স্মিথ

Answer 7

রিঅ্যাক্ট-রাউটার ভি 4.4 হিসাবে আপনি নীচের মত ঠিক কিছু করতে পারেন।

একটি চলকটিতে পাথ সংরক্ষণ করুন এবং নীচে পাস করুন এবং '|' ব্যবহার করুন অপারেটর.

let home = "/home" ;
let users = "/users”;
let widgets = "/widgets" ;

<Route path={ {home} | {users} | {widgets} }  component={Home} /> 

সুতরাং এটি সমস্ত পাথের সাথে মিলে component={Home}যা এটি আপনার রেন্ডারটি রেন্ডার করে ..