DefaultRout को React Router में दूसरे रूट पर कैसे सेट करें

Question

मेरे पास निम्नलिखित हैं:

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

DefaultRoute का उपयोग करते समय, SearchDashboard गलत तरीके से प्रस्तुत करता है क्योंकि डैशबोर्ड के भीतर किसी भी * डैशबोर्ड को प्रस्तुत करने की आवश्यकता होती है।

मैं रूट "सर्चडैशबोर्ड" को इंगित करने के लिए "ऐप" रूट के भीतर अपने डिफॉल्टरूट के लिए चाहूंगा। क्या यह कुछ ऐसा है जिसे मैं रिएक्ट राउटर के साथ कर सकता हूं, या क्या मुझे इसके लिए सामान्य जावास्क्रिप्ट (पृष्ठ पुनर्निर्देशित के लिए) का उपयोग करना चाहिए?

मूल रूप से, यदि उपयोगकर्ता होम पेज पर जाता है तो मैं उसे खोज डैशबोर्ड के बजाय भेजना चाहता हूं। इसलिए मुझे लगता है कि मैं इसके बराबर एक रिएक्टर राउटर सुविधा की तलाश कर रहा हूंwindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

Comments

<से = "/" = "searchDashboard" / पर रीडायरेक्ट करें> DefaultRoute के बजाय पुनर्निर्देशन का उपयोग कर के अपने की कोशिश की?

— जॉनातन लुंडक्विस्ट Meden

@ JonatanLundqvistMedén वही है जिसकी मुझे तलाश थी, धन्यवाद! इसे उत्तर के रूप में लिखें और मैं इसे सही के रूप में चिह्नित करूंगा। देरी से प्रतिक्रिया देने के लिए माफ करें।

— मैथ्यू हर्बस्ट

Answer 1

आप DefaultRoute के बजाय Redirect का उपयोग कर सकते हैं

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

अद्यतन 2019-08-09 इसके बजाय ताज़ा उपयोग के साथ समस्या से बचने के लिए, ओग्लास के लिए धन्यवाद

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

Comments

क्या यह सिर्फ मेरे लिए है, या इसका उपयोग करते हुए सीधे एक गहरी url को हिट करने के लिए, मैं हमेशा "to" url पर पुनर्निर्देशित हो जाता हूं, बजाय कि मैं हिट करने की कोशिश कर रहा हूं?

— पबलोटे

ध्यान दिया जाना चाहिए कि यदि आप कुछ पुनर्निर्देशन कर रहे हैं जैसे from='/a' to='/a/:id', आपको प्रतिक्रिया-राउटर से <Switch>अपने <Redirect>और <Route>घटक को शामिल करने के लिए उपयोग करना होगा । विवरण देखें डॉक

— कुलबेअर

@Kulbear मुझे भी यही समस्या थी। अपने जवाब में ओग्लास ने जो कहा वह करते हुए काम किया।

— एलन पी।

यह काम करने के लिए आपको सबसे अधिक संभावना है कि आप इस मार्ग को अंतिम रूप दें या ऐसा करें<Redirect exact from="/" to="/adaptation" />

— DarkWalker

इसे देखना आसान है, इसलिए मैं दोहराता हूं: डार्कवल्कर के पुनर्निर्देशन का महत्वपूर्ण हिस्सा exactध्वज है। स्वीकृत उत्तर गायब है, इसलिए यह किसी भी मार्ग से [लगभग] मेल खाता है।

— 19

Answer 2

उपयोग करने <Redirect from="/" to="searchDashboard" />में समस्या यह है कि यदि आपके पास एक अलग URL है, तो कहना है /indexDashboardकि उपयोगकर्ता ताज़ा करता है या उन्हें भेजा गया URL प्राप्त करता है, तो उपयोगकर्ता को /searchDashboardवैसे भी पुनर्निर्देशित किया जाएगा ।

यदि आप उपयोगकर्ताओं को इस साइट को रीफ्रेश करने या URL भेजने में सक्षम नहीं हैं, तो इसका उपयोग करें:

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

यदि searchDashboardलॉगिन के पीछे यह प्रयोग करें :

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

Answer 3

मैं गलत तरीके से डिफ़ॉल्ट पथ बनाने का प्रयास कर रहा था:

<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 देखें ।

Comments

किसी Routeऐसी चीज़ के होने का क्या मतलब है जो पहले से ही आपके द्वारा नियंत्रित की जाती है IndexRoute?

— मैथ्यू हर्बस्ट

कोई मतलब नहीं है, और मैंने अपना जवाब संपादित किया यह स्पष्ट करने के लिए कि मैं इसकी वकालत नहीं कर रहा था।

— सेठ

यह वही है जो मैं भी कर रहा हूं, लेकिन मैं एक ऐसा समाधान पसंद करूंगा जो किसी घटक (मेरे होमपेज) पर काम करता हो, /बजाय इसके कि आपको पूर्वनिर्धारित करना पड़े /home।

— एरिकोको

लगता है कि मैं <IndexRoute>आखिर तलाश कर रहा हूं । शोर के लिए क्षमा करें। stackoverflow.com/questions/32706913/… github.com/reactjs/react-router/blob/master/docs/guides/…

— ericsoco

Answer 4

जोनाथन का जवाब मुझे काम नहीं आया। मैं React v0.14.0 और React Router v1.0.0-rc3 का उपयोग कर रहा हूं। यह किया:

<IndexRoute component={Home}/>।

मैथ्यू के मामले में, मेरा मानना ​​है कि वह चाहते हैं:

<IndexRoute component={SearchDashboard}/>।

स्रोत: https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ComponentLifecycle.md

Comments

शेयर के लिए धन्यवाद। मैं रिएक्ट v0.13 और उसके लिए रिएक्ट-राउटर के संस्करण का उपयोग कर रहा था, इसलिए पूर्व-1.0 / आरसी संस्करण। आशा है कि यह दूसरों की मदद करता है!

— मैथ्यू हर्बस्ट

मुझे लगता है कि यह आपको संदर्भ खो देता है। SearchDashboardवह घटक होगा जिसे आप मुखपृष्ठ पर आने पर देखेंगे, लेकिन उस Dashboardघटक को नहीं जो इसे सीधे जाने पर लपेट रहा है /dashboard/searchDashboard। रिएक्ट-राउटर गतिशील रूप से URL द्वारा मेल किए गए मार्गों के आधार पर नेस्टेड घटकों के पदानुक्रम का निर्माण करता है, इसलिए मुझे लगता है कि आपको वास्तव में यहां पुनर्निर्देशित करने की आवश्यकता है।

— स्टिजन डे विट

Answer 5

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

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

यह आपको ऐसा बना देगा कि जब आप सर्वर को स्थानीय होस्ट पर लोड करेंगे तो यह आपको / कुछ को निर्देशित करेगा

Answer 6

अद्यतन : 2020

रीडायरेक्ट का उपयोग करने के बजाय, बस में कई रूट जोड़ें path

उदाहरण:

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

Answer 7

मैं एक समान मुद्दे में भाग गया; मैं डिफ़ॉल्ट मार्ग हैंडलर चाहता था यदि मार्ग हैंडलर में से कोई भी मेल नहीं खाता।

मेरा समाधान पथ मूल्य के रूप में वाइल्डकार्ड का उपयोग करना है। यानी यह भी सुनिश्चित करें कि यह आपके मार्गों की परिभाषा में अंतिम प्रविष्टि है।

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

Answer 8

2017 में आने वालों के लिए, यह नया समाधान है IndexRedirect:

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

Answer 9

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

Comments

किसके समकक्ष है DefaultRoutereact-routerV4 में ?

— एंथनी काँग

@AnthonyKong मुझे लगता है कि यह है <Route exact path="/" component={Home}/>:।reacttraining.com/react-router/web/example/basic

— TYMG

Answer 10

पसंदीदा तरीका प्रतिक्रिया रूटर IndexRoutes घटक का उपयोग करना है

आप इसे इस तरह उपयोग करते हैं (ऊपर लिंक किए गए प्रतिक्रिया राउटर डॉक्स से लिया गया है):

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

Answer 11

आप इसका उपयोग किसी विशेष URL पर पुनर्निर्देशित करने और पुराने राउटर से नए-राउटर पर पुनर्निर्देशित करने के बाद घटक को रेंडर करने के लिए करते हैं।

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