प्रतिक्रिया रूटर 2.0.0-RC5 में मौजूदा मार्ग प्राप्त करने के लिए कैसे

Question

मैं नीचे की तरह एक रूटर है:

<Router history={hashHistory}> 
    <Route path="/" component={App}> 
     <IndexRoute component={Index}/> 
     <Route path="login" component={Login}/> 
    </Route> 
</Router> 

यहाँ मैं क्या हासिल करना चाहते: /login को

1. पुनर्निर्देशन उपयोगकर्ता नहीं तो
2. में लॉग इन उपयोगकर्ता /login तक पहुँचने के लिए जब वे पहले से लॉग इन कर रहे हैं की कोशिश की है, उन्हें जड़ को अनुप्रेषित /

तो अब मैं App के componentDidMount में उपयोगकर्ता की स्थिति जांचने के लिए कोशिश कर रहा हूँ, तो कुछ ऐसे कार्य करें:

if (!user.isLoggedIn) { 
    this.context.router.push('login') 
} else if(currentRoute == 'login') { 
    this.context.router.push('/') 
} 

समस्या यहाँ मैं वर्तमान मार्ग पाने के लिए एपीआई नहीं मिल सकता है।

मुझे this closed issue राउटर.एक्टिवस्टेट मिश्रण और मार्ग हैंडलर का उपयोग करने का सुझाव मिला, लेकिन ऐसा लगता है कि इन दो समाधानों को अब हटा दिया गया है।

Answer 1

कुछ और दस्तावेज पढ़ने के बाद, मैं समाधान नहीं मिला:

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md

मैं बस की तरह घटक के उदाहरण का इंजेक्शन संपत्ति location का उपयोग करने की जरूरत है:

var currentLocation = this.props.location.pathname 

Answer 2

आप तो इतिहास का उपयोग करें, फिर राउटर इतिहास से स्थान में सब कुछ डाल दें, जैसे:

this.props.location.pathname; 
this.props.location.query; 

इसे प्राप्त करें?

Answer 3

आप वर्तमान मार्ग

const currentRoute = this.props.routes[this.props.routes.length - 1]; 

का उपयोग कर ... जो आपको सबसे कम स्तर के सक्रिय <Route ...> घटक से रंगमंच की सामग्री तक पहुँच देता है प्राप्त कर सकते हैं।

को देखते हुए ...

<Route path="childpath" component={ChildComponent} /> 

currentRoute.path रिटर्न 'childpath' और currentRoute.component रिटर्न function _class() { ... }।

Answer 4

तुम इतनी तरह 'isActive' प्रोप इस्तेमाल कर सकते हैं:

const { router } = this.context; 
if (router.isActive('/login')) { 
    router.push('/'); 
} 

isActive एक सही या गलत वापस आ जाएगी।

प्रतिक्रिया रूटर 2.7

Answer 5

संस्करण 3.0.0 के रूप में के साथ परीक्षण किया गया, आपको कॉल करके वर्तमान मार्ग प्राप्त कर सकते हैं:

this.context.router.location।पथ नाम

नमूना कोड के नीचे है:

var NavLink = React.createClass({ 
    contextTypes: { 
     router: React.PropTypes.object 
    }, 

    render() { 
     return (
      <Link {...this.props}></Link> 
     ); 
    } 
}); 

Answer 6

2017 में एक ही समस्या हो रही किसी भी उपयोगकर्ताओं के लिए, मैं इसे नीचे दिए तरीक़े से हल:

NavBar.contextTypes = { 
    router: React.PropTypes.object, 
    location: React.PropTypes.object 
} 

और इस तरह इसका इस्तेमाल:

componentDidMount() { 
    console.log(this.context.location.pathname); 
} 

Answer 7

उसी तरह मेरे लिए काम करता है:

... 
<MyComponent {...this.props}> 
    <Route path="path1" name="pname1" component="FirstPath"> 
    ... 
</MyComponent> 
... 

और फिर, मैं MyComponent फ़ंक्शन में "this.props.location.pathname" तक पहुंच सकता हूं।

मैं भूल गया था कि मैं कर रहा हूँ ...))) लिंक के बाद मेकअप नेविगेशन पट्टी आदि .: react router this.props.location