इस का उपयोग करते हुए ReactJs

Question

मैं एक परियोजना अपने आवेदन मैं सक्रिय मार्ग हो रही है reactjs.In का उपयोग कर बनाने हूँ में प्रतिक्रिया रूटर के साथ एक सक्रिय मार्ग प्राप्त करें:

this.context.router.isActive 

लेकिन अपरिभाषित हो रही, मैं react- उपयोग कर रहा हूँ राउटर 4. इससे पहले कि प्रतिक्रिया-राउटर के निचले संस्करण का उपयोग करते समय यह मेरे लिए काम किया गया था।

class NavLink extends React.Component { 

    render() { 


    console.log(this.context.router.isActive) 
      let isActive = this.context.router.isActive(this.props.to, true); 
      let className = isActive ? "active" : ""; 
     return(
      <li className={className} {...this.props}> 
       <Link {...this.props}/> 
      </li > 
     ); 
    } 
} 

NavLink.contextTypes = { 
    router: PropTypes.object 
}; 

Answer 1

वास्तुकला में बदल गया है प्रतिक्रिया रूटर v4 और this.context.router.isActive अब समर्थित नहीं है: यहाँ मेरी कोड है।

प्रतिक्रिया-राउटर-वी 4 में, आप एक NavLink बनाने के बजाय स्वयं को NavLink घटक का उपयोग कर सकते हैं।

From the documentation:

NavLink

कि स्टाइल जोड़ देगा का एक विशेष संस्करण जब यह वर्तमान URL से मेल खाता गाया तत्व को जिम्मेदार बताते हैं।

import { NavLink } from 'react-router-dom' 

<NavLink to="/about">About</NavLink> 

यह भी आप एक activeClassName प्रोप प्रदान करता है:

activeClassName: स्ट्रिंग

वर्ग जब यह सक्रिय है तत्व देने के लिए। डिफ़ॉल्ट कक्षा सक्रिय है। यह क्लासनाम प्रोप के साथ जुड़ जाएगा।

<NavLink 
    to="/faq" 
    activeClassName="selected" 
>FAQs</NavLink> 

this.context.router.isActive क्यों समर्थित नहीं है:

यहाँ एक github मुद्दा

से एक अंश प्रतिपादन एक <Route> जरूरी नहीं कि "केवल जब आप वर्तमान स्थान से मेल खाते हैं तो प्रस्तुत करें "। उदाहरण के लिए, इसका उपयोग संदर्भ से रूटर वैरिएबल को प्रोप के रूप में घटक में इंजेक्ट किया जा सकता है।

<NavLink> में, <Route> बच्चों के प्रोप का उपयोग कर रहा है, जिसका अर्थ है कि यह बच्चों को यह बताएगा कि मार्ग मेल खाता है या नहीं। अगर मैच शून्य है, तो हम जानते हैं कि यह मेल नहीं खाता है।

यदि आप इस तरह से <Route children> का उपयोग नहीं करना चाहते हैं, तो प्रतिक्रिया राउटर matchPath फ़ंक्शन के साथ एक अनिवार्य दृष्टिकोण प्रदान करता है। यह <Switch>es और <Route>s पथ के विरुद्ध किसी स्थान से मेल खाने के लिए आंतरिक रूप से उपयोग करता है।

अपने घटक Router रंगमंच की सामग्री प्राप्त नहीं हो रहे हैं, तो आप यह withRouter अस्थायी

import { withRouter } from 'react-router'; 

export class withRouter(MyComponent); 

का उपयोग कर इंजेक्षन सकता है