रिएक्ट-राउटर: नहीं नहीं मिला रूट?

Question

निम्नलिखित को धयान मे रखते हुए:

var AppRoutes = [
    <Route handler={App} someProp="defaultProp">
        <Route path="/" handler={Page} />
    </Route>,

    <Route  handler={App} someProp="defaultProp">
        <Route path="/" handler={Header} >
            <Route path="/withheader" handler={Page} />
        </Route>
    </Route>,

    <Route handler={App} someProp="defaultProp">
        <Route path=":area" handler={Area} />
        <Route path=":area/:city" handler={Area} />
        <Route path=":area/:city/:locale" handler={Area} />
        <Route path=":area/:city/:locale/:type" handler={Area} />
    </Route>
];

मेरे पास एक ऐप टेम्प्लेट, एक हेडरप्लेट, और एक ही हैंडलर (ऐप टेम्प्लेट के भीतर) वाले मार्गों का पैरामीटर सेट है। मैं 404 मार्गों की सेवा करने में सक्षम होना चाहता हूं जब कुछ नहीं मिलता है। उदाहरण के लिए, / CA / SanFrancisco को ढूंढना चाहिए और Area द्वारा संभाला जाना चाहिए, जबकि / SanFranciscoz को 404 होना चाहिए।

यहां बताया गया है कि मैं मार्गों का परीक्षण कैसे करता हूं।

['', '/', '/withheader', '/SanFranciscoz', '/ca', '/CA', '/CA/SanFrancisco', '/CA/SanFrancisco/LowerHaight', '/CA/SanFrancisco/LowerHaight/condo'].forEach(function(path){
    Router.run(AppRoutes, path, function(Handler, state){
        var output = React.renderToString(<Handler/>);
        console.log(output, '\n');
    });
});

समस्या यह है कि / SanFranciscoz को हमेशा एरिया पेज द्वारा हैंडल किया जा रहा है, लेकिन मैं इसे 404 पर चाहता हूं। इसके अलावा, यदि मैं पहले रूट कॉन्फ़िगरेशन में एक NotFoundRoute जोड़ देता हूं, तो सभी एरिया पेज 404।

<Route handler={App} someProp="defaultProp">
    <Route path="/" handler={Page} />
    <NotFoundRoute handler={NotFound} />
</Route>,

मैं क्या गलत कर रहा हूं?

यहाँ एक जिस्ट है जिसे डाउनलोड किया जा सकता है और उस पर प्रयोग किया जा सकता है।

https://gist.github.com/adjavaherian/aa48e78279acddc25315

Comments

इस प्रश्न को समाप्त करने वाले लोगों के लिए भविष्य में संदर्भ के लिए, नीचे दिए गए सही उत्तर के अलावा, इस लेख को पढ़ें । मैं इससे पहले आया था और मुझे लगता है कि वह व्यक्ति इसे पूरी तरह से समझाता है।

— दिमित्रिस डेमिलोस

Answer 1

DefaultRoute और NotFoundRoute को प्रतिक्रिया-रूटर 1.0.0 में हटा दिया गया था।

मैं इस बात पर जोर देना चाहता हूं कि तारांकन के साथ डिफ़ॉल्ट मार्ग को काम करने के लिए वर्तमान पदानुक्रम स्तर में अंतिम होना चाहिए । अन्यथा यह पेड़ में दिखाई देने वाले अन्य सभी मार्गों को ओवरराइड करेगा क्योंकि यह पहले है और हर पथ से मेल खाता है।

प्रतिक्रिया-राउटर 1, 2 और 3 के लिए

यदि आप एक 404 प्रदर्शित करना चाहते हैं और पथ को बनाए रखें (NotFoundRoute के रूप में कार्यक्षमता)

<Route path='*' exact={true} component={My404Component} />

यदि आप एक 404 पृष्ठ प्रदर्शित करना चाहते हैं, लेकिन url को बदल दें (Default कार्यक्षमता को DefaultRoute के रूप में)

<Route path='/404' component={My404Component} />
<Redirect from='*' to='/404' />

कई स्तरों के साथ उदाहरण:

<Route path='/' component={Layout} />
    <IndexRoute component={MyComponent} />
    <Route path='/users' component={MyComponent}>
        <Route path='user/:id' component={MyComponent} />
        <Route path='*' component={UsersNotFound} />
    </Route>
    <Route path='/settings' component={MyComponent} />
    <Route path='*' exact={true} component={GenericNotFound} />
</Route>

प्रतिक्रिया-राउटर 4 और 5 के लिए

रास्ता रखो

<Switch>
    <Route exact path="/users" component={MyComponent} />
    <Route component={GenericNotFound} />
</Switch>

दूसरे रूट पर जाएं (url बदलें)

<Switch>
    <Route path="/users" component={MyComponent} />
    <Route path="/404" component={GenericNotFound} />
    <Redirect to="/404" />
</Switch>

आदेश मायने रखता है!

Comments

अगर आपके पास एक redux ऐप है, तो आप कैसे करते हैं: <Redirect from='*' to='/home' />इस सिंटैक्स में:const routes = { component: Main, childRoutes: [ { path: '/', component: Home }, ], indexRoute: { component: Main, }, };

— tatsu

यदि आप 404 के लिए सहारा सेट करना चाहते हैं-इस कोड का उपयोग करें:<Route render={(props)=> <MyComponent myProp={someVar} {...props} />} />

— मार्को वेबर

500 पेज के बारे में क्या? उस पृष्ठ की तरह जिसे लोड करना है, लेकिन एपीआई एक त्रुटि देता है। मार्ग रखने के दौरान विफल हुए पृष्ठ के बजाय इसे कैसे दिखाएं?

— PixMach

<Redirect to = "/ 404" /> का कारण बनता है प्रतिक्रिया-राउटर-डोम 5.0.0 पर अधिकतम अद्यतन गहराई। यदि पृष्ठ 404 बाहर निकलता है, तो भी यह पुनर्निर्देश करता है।

— २०:११ पर मिगुएलस्लैव

मुझे रीडायरेक्ट का उपयोग करना नापसंद है क्योंकि यह उपयोगकर्ता से समस्याग्रस्त URL को छुपाता है। पिछले पृष्ठ पर वापस जाने के लिए इसे दो बार मारना होगा।

— sdgfsdh

Answer 2

प्रतिक्रिया-राउटर के नए संस्करणों में आप एक स्विच में मार्गों को लपेटना चाहते हैं जो केवल पहले मिलान वाले घटक को प्रस्तुत करता है। अन्यथा आप कई घटकों को प्रस्तुत करना देखेंगे।

उदाहरण के लिए:

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route,
  browserHistory,
  Switch
} from 'react-router-dom';

import App from './app/App';
import Welcome from './app/Welcome';
import NotFound from './app/NotFound';

const Root = () => (
  <Router history={browserHistory}>
    <Switch>
      <Route exact path="/" component={App}/>
      <Route path="/welcome" component={Welcome}/>
      <Route component={NotFound}/>
    </Switch>
  </Router>
);

ReactDOM.render(
  <Root/>,
  document.getElementById('root')
);

Comments

आपको path="*"NotFound मार्ग पर शामिल करने की आवश्यकता नहीं है । ओमिटिंग pathरूट को हमेशा मेल खाने का कारण बनेगा।

— चिपिट

देर से आने वाले लोगों के लिए, @ चिपिट 24 सही है, भ्रम से बचने के लिए बस pathपूरी तरह से अज्ञात मार्गों के लिए छोड़ दें

— Altair312

Answer 3

रिएक्ट राउटर के नए संस्करण (अब 2.0.1 का उपयोग करके) के साथ, आप एक तारांकन चिह्न का उपयोग सभी 'अन्य रास्तों' को करने के लिए पथ के रूप में कर सकते हैं।

तो यह इस तरह दिखेगा:

<Route route="/" component={App}>
    <Route path=":area" component={Area}>
        <Route path=":city" component={City} />
        <Route path=":more-stuff" component={MoreStuff} />    
    </Route>
    <Route path="*" component={NotFoundRoute} />
</Route>

Answer 4

यह उत्तर प्रतिक्रिया-राउटर -4 के लिए है। आप स्विच ब्लॉक में सभी मार्गों को लपेट सकते हैं, जो स्विच-केस अभिव्यक्ति की तरह ही कार्य करता है, और पहले मिलान वाले मार्ग के साथ घटक को प्रस्तुत करता है। जैसे)

<Switch>
      <Route path="/" component={home}/>
      <Route path="/home" component={home}/>
      <Route component={GenericNotFound}/> {/* The Default not found component */}
</Switch>

कब इस्तेमाल करें exact

बिना सटीक:

<Route path='/home'
       component = {Home} />

{/* This will also work for cases like https://<domain>/home/anyvalue. */}

सटीक के साथ:

<Route exact path='/home'
       component = {Home} />

{/* 
     This will NOT work for cases like https://<domain>/home/anyvalue. 
     Only for https://<url>/home and https://<domain>/home/
*/}

अब यदि आप रूटिंग मापदंडों को स्वीकार कर रहे हैं, और यदि यह गलत है, तो आप इसे लक्ष्य घटक में ही संभाल सकते हैं। जैसे)

<Route exact path='/user/:email'
       render = { (props) => <ProfilePage {...props} user={this.state.user} />} />

अब ProfilePage.js में

if(this.props.match.params.email != desiredValue)
{
   <Redirect to="/notFound" component = {GenericNotFound}/>
   //Or you can show some other component here itself.
}

अधिक जानकारी के लिए आप इस कोड के माध्यम से जा सकते हैं:

App.js

ProfilePage.js

Answer 5

प्रलेखन के अनुसार , मार्ग पाया गया था , भले ही संसाधन नहीं था।

नोट : जब कोई संसाधन नहीं मिलता है, तो इसका उपयोग करने का इरादा नहीं है। राउटर के बीच एक मेल नहीं खाए गए पथ और एक मान्य URL के बीच अंतर है जिसके परिणामस्वरूप संसाधन नहीं मिल रहा है। यूआरएल पाठ्यक्रम / 123 एक वैध यूआरएल है और एक मिलान मार्ग में परिणाम है, इसलिए यह "पाया गया" जहां तक ​​मार्ग का संबंध है। फिर, यदि हम कुछ डेटा प्राप्त करते हैं और पता चलता है कि पाठ्यक्रम 123 मौजूद नहीं है, तो हम एक नए मार्ग पर संक्रमण नहीं करना चाहते हैं। सर्वर की तरह, आप आगे बढ़ते हैं और url की सेवा करते हैं, लेकिन अलग-अलग UI प्रदान करते हैं (और एक अलग स्थिति कोड का उपयोग करते हैं)। आपको कभी भी NotFoundRoute पर संक्रमण करने का प्रयास नहीं करना चाहिए।

इसलिए, यदि संसाधन मान्य है , तो आप हमेशा Router.run()पहले एक पंक्ति जोड़ सकते हैं React.render()। बस घटक के नीचे एक प्रस्ताव पास करें या Handlerनोटफ़ाउंड दृश्य को प्रदर्शित करने के लिए कस्टम के साथ घटक को ओवरराइड करें ।

Comments

धन्यवाद @ ब्रैड, आप सही कह रहे हैं, आपको इसे घटक के साथ संभालना होगा या राउटर से पहले हैंडलर को ओवरराइड करना होगा।

— 23m पर 4m1r

NotFound को github.com/reactjs/react-router/releases/tag/v1.0.0 , अब उपयोग <Route path="*" to="/dest" />या <Redirect from="*" to="/dest" />अंतिम उप मार्ग के रूप में मिलान करने के लिए किया गया था, मेरा मानना ​​है कि

— ptim

Answer 6

मुझे सिर्फ आपके उदाहरण पर एक त्वरित नज़र थी, लेकिन अगर मैंने इसे सही तरीके से समझा तो आप डायनेमिक सेगमेंट में 404 मार्गों को जोड़ने का प्रयास कर रहे हैं। मेरे पास कुछ दिन पहले एक ही मुद्दा था, # 458 और # 1103 मिला और रेंडर के भीतर हाथ से बने चेक के साथ समाप्त हुआ:

if (!place) return <NotFound />;

उम्मीद है की वो मदद करदे!

Comments

धन्यवाद @ जोर्न, मुझे लगता है कि आप सही हैं, यह केवल घटक स्तर से पता लगता है

— 4m1r