प्रतिक्रिया-राउटर 2.0.0-आरसी 5 में वर्तमान मार्ग कैसे प्राप्त करें

Question 1

मेरे पास नीचे की तरह एक राउटर है:

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

यहाँ मैं क्या हासिल करना चाहता हूँ:

/loginयदि लॉग इन न हो तो उपयोगकर्ता को पुनर्निर्देशित करें
यदि उपयोगकर्ता प्रवेश करने का प्रयास /loginकरते हैं, तो वे पहले से लॉग इन हैं, उन्हें रूट करने के लिए पुनर्निर्देशित करें/

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

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

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

मैंने पाया कि यह बंद मुद्दा Router.ActiveState मिक्सिन और रूट हैंडलर्स का उपयोग करके सुझाया गया है, लेकिन ऐसा लगता है कि ये दो समाधान अब अपदस्थ हैं।

Question 2

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

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

मुझे बस locationघटक के उदाहरण की इंजेक्टेड संपत्ति तक पहुँचने की आवश्यकता है जैसे:

var currentLocation = this.props.location.pathname

Question 3

आप वर्तमान मार्ग का उपयोग कर प्राप्त कर सकते हैं

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

... जो आपको सबसे निचले स्तर के सक्रिय <Route ...>घटक से प्रॉप्स तक पहुंच प्रदान करता है ।

दिया हुआ...

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

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

Question 4

यदि आप इतिहास का उपयोग करते हैं, तो राउटर ने इतिहास से हर चीज को लोकेशन में डाल दिया, जैसे:

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

उसे ले लो?

Question 5

संस्करण 3.0.0 के अनुसार, आप कॉल करके वर्तमान मार्ग प्राप्त कर सकते हैं:

this.context.router.location.pathname

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

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

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

Question 6

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

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

और इसे इस तरह उपयोग करें:

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

Question 7

में App.jsकोड और कोशिश नीचे जोड़ने

window.location.pathname

Question 8

आप 'इस प्रकार सक्रिय' प्रोप का उपयोग कर सकते हैं:

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

isActive एक सही या गलत लौटाएगा।

प्रतिक्रिया-राउटर 2.7 के साथ परीक्षण किया गया

Question 9

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

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

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

मैं भूल गया था कि मैं यह था ...))) निम्नलिखित लिंक नेविगेशन बार आदि के लिए और अधिक वर्णन करता है।: इस रूटर रूटर।

Question 10

पथ का उपयोग करके हथियाने का प्रयास करें: document.location.pathname

जावास्क्रिप्ट में आप भागों में वर्तमान URL कर सकते हैं। जांच करें: https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/