কীভাবে ডিফল্টরউটকে প্রতিক্রিয়া রাউটারের অন্য একটি রুটে সেট করবেন

Question 1

আমার নিম্নলিখিতগুলি রয়েছে:

  <Route name="app" path="/" handler={App}>
    <Route name="dashboards" path="dashboards" handler={Dashboard}>
      <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} />
      <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} />
      <DefaultRoute handler={DashboardExplain} />
    </Route>
    <DefaultRoute handler={SearchDashboard} />
  </Route>

ডিফল্টরউট ব্যবহার করার সময়, অনুসন্ধান ড্যাশবোর্ড ভুলভাবে রেন্ডার করে যেহেতু যে কোনও * ড্যাশবোর্ডকে ড্যাশবোর্ডের মধ্যে রেন্ডার করা দরকার।

আমি আমার ডিফল্ট রুটটির জন্য "অ্যাপ্লিকেশন" রাউটের অভ্যন্তরে রুটটি "অনুসন্ধানড্যাশবোর্ডে" নির্দেশ করতে চাই। এটি কি আমি প্রতিক্রিয়া রাউটারের সাহায্যে করতে পারি বা এর জন্য আমার কি সাধারণ জাভাস্ক্রিপ্ট (কোনও পৃষ্ঠা পুনর্নির্দেশের জন্য) ব্যবহার করা উচিত?

মূলত, যদি ব্যবহারকারী হোম পৃষ্ঠায় যান তবে আমি তাদের পরিবর্তে অনুসন্ধান ড্যাশবোর্ডে পাঠাতে চাই। সুতরাং আমি অনুমান করি আমি এর সমান একটি প্রতিক্রিয়া রাউটার বৈশিষ্ট্যটি সন্ধান করছিwindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

Question 2

আপনি ডিফল্টরউটের পরিবর্তে পুনঃনির্দেশ ব্যবহার করতে পারেন

<Redirect from="/" to="searchDashboard" />

রিফ্রেশে সমস্যা এড়াতে 2019-08-09 আপডেট করুন পরিবর্তে এটি ব্যবহার করুন ওগ্লাসকে ধন্যবাদ

<Redirect exact from="/" to="searchDashboard" />

Question 3

ব্যবহারে সমস্যাটি <Redirect from="/" to="searchDashboard" />হ'ল যদি আপনার আলাদা ইউআরএল থাকে, বলুন /indexDashboardএবং ব্যবহারকারী রিফ্রেশটি হিট করে বা তাদের কাছে একটি ইউআরএল প্রেরণ করা হয় তবে ব্যবহারকারীকে যে /searchDashboardকোনও উপায়ে পুনঃনির্দেশ করা হবে ।

আপনি যদি ব্যবহারকারীদের সাইটটি রিফ্রেশ করতে বা ইউআরএলগুলি প্রেরণ করতে সক্ষম না হন তবে এটি ব্যবহার করুন:

<Route exact path="/" render={() => (
    <Redirect to="/searchDashboard"/>
)}/>

searchDashboardলগইনের পিছনে থাকলে এটি ব্যবহার করুন :

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/searchDashboard"/>
  ) : (
    <Redirect to="/login"/>
  )
)}/>

Question 4

আমি এটির সাথে ভুলভাবে একটি ডিফল্ট পাথ তৈরির চেষ্টা করছিলাম:

<IndexRoute component={DefaultComponent} />
<Route path="/default-path" component={DefaultComponent} />

তবে এটি দুটি পৃথক পাথ তৈরি করে যা একই উপাদানকে রেন্ডার করে। কেবল এটি অর্থহীন নয়, এটি আপনার ইউআইতেও সমস্যা সৃষ্টি করতে পারে, যখন আপনি যখন <Link/>উপাদানগুলির উপর ভিত্তি করে স্টাইলিং করেন this.history.isActive()।

একটি ডিফল্ট রুট তৈরি করার সঠিক উপায় (এটি সূচক রুট নয়) ব্যবহার করা হয় <IndexRedirect/>:

<IndexRedirect to="/default-path" />
<Route path="/default-path" component={DefaultComponent} />

এটি প্রতিক্রিয়া-রাউটার 1.0.0 এর উপর ভিত্তি করে। Https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js দেখুন ।

Question 5

জোনাথনের উত্তর আমার পক্ষে কার্যকর হয়নি বলে মনে হয়েছে। আমি প্রতিক্রিয়া v0.14.0 এবং প্রতিক্রিয়া রাউটার v1.0.0-rc3 ব্যবহার করছি। এটি করেছে:

<IndexRoute component={Home}/>।

ম্যাথিউ এর ক্ষেত্রে, আমি বিশ্বাস করি যে তিনি চান:

<IndexRoute component={SearchDashboard}/>।

সূত্র: https://github.com/rackt/react-router/blob/master/docs/guides/advanced/Comp घटक Lifecycle.md

Question 6

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

class App extends Component {
  render() {
    return (
      <div>
        <Route path='/'>
          <Redirect to="/something" />
        </Route>
//rest of code here

এটি এটি তৈরি করবে যাতে আপনি যখন স্থানীয় হোস্টে সার্ভারটি লোড করবেন এটি আপনাকে / কোনও কিছুর দিকে পরিচালিত করবে

Question 7

আপডেট : 2020

পুনঃনির্দেশ ব্যবহার না করে কেবলমাত্র একাধিক রুট যুক্ত করুন path

উদাহরণ:

<Route exact path={["/","/defaultPath"]} component={searchDashboard} />

Question 8

আমি একটি অনুরূপ ইস্যু মধ্যে দৌড়ে; আমি কোনও ডিফল্ট রুট হ্যান্ডলার চেয়েছিলাম যদি রুটের হ্যান্ডলারটির কোনওটিই মেলে না।

আমার সমাধানগুলি হ'ল পথের মান হিসাবে একটি ওয়াইল্ডকার্ড ব্যবহার করা। অর্থাত্ এটি নিশ্চিত করুন যে এটি আপনার রুটের সংজ্ঞাতে শেষ প্রবেশ।

<Route path="/" component={App} >
    <IndexRoute component={HomePage} />
    <Route path="about" component={AboutPage} />
    <Route path="home" component={HomePage} />
    <Route path="*" component={HomePage} />
</Route>

Question 9

2017 সালে যারা আসছেন তাদের ক্ষেত্রে এটিই নতুন সমাধান IndexRedirect:

<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
  <Route path="about" component={About} />
</Route>

Question 10

 <Route name="app" path="/" handler={App}>
    <Route name="dashboards" path="dashboards" handler={Dashboard}>
      <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} />
      <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} />
      <DefaultRoute handler={DashboardExplain} />
    </Route>
    <Redirect from="/*" to="/" />
  </Route>

Question 11

পছন্দের পদ্ধতি প্রতিক্রিয়া রাউটার ব্যবহার করা IndexRoutes উপাদান

আপনি এটির মতো এটি ব্যবহার করুন (উপরে লিঙ্কযুক্ত রাউটার ডক্স থেকে নেওয়া):

<Route path="/" component={App}>
    <IndexRedirect to="/welcome" />
    <Route path="welcome" component={Welcome} />
    <Route path="about" component={About} />
</Route>

Question 12

আপনি কোনও নির্দিষ্ট ইউআরএলকে পুনর্নির্দেশ করতে এবং পুরাতন-রাউটার থেকে নতুন রাউটারে পুনঃনির্দেশের পরে উপাদান রেন্ডার করতে এটির মতো এটি ব্যবহার করেন।

<Route path="/old-router">
  <Redirect exact to="/new-router"/>
  <Route path="/new-router" component={NewRouterType}/>
</Route>