प्रतिक्रिया-राउटर और ES6 कक्षाओं के साथ window.location का अनुकरण कैसे करें

Question

मैं प्रतिक्रिया-राउटर का उपयोग कर रहा हूं, इसलिए मैं पूरे ऐप में अपने लिंक के लिए <Link /> घटक का उपयोग करता हूं, कुछ मामलों में मुझे गतिशील रूप से उपयोगकर्ता के आधार पर लिंक उत्पन्न करने की आवश्यकता होती है इनपुट, तो मुझे window.location जैसे कुछ चाहिए, लेकिन पेज रीफ्रेश किए बिना। (https://github.com/rackt/react-router/issues/835) - -

मैं इस छोटे से टिप्पणी पाया मैं this.context.router.transitionTo(mylink) का उपयोग कर की कोशिश की, लेकिन मैं संदर्भ के साथ समस्याएं आ रही हैं ...

जो मेरे लिए (https://github.com/rackt/react-router/issues/1059) का नेतृत्व किया, फिर भी संदर्भ रिटर्न और खाली वस्तु है, इसलिए जब मैं कुछ ऐसा करने की कोशिश करता हूं: this.context.router.transitionTo(mylink); मुझे Cannot read property 'transitionTo' of undefined मिलता है (यदि मैं कन्स्ट्रक्टर के भीतर यह .context = संदर्भ सेट करने जैसा कुछ करने की कोशिश करता हूं)।

ड्रैग नहीं करना है, लेकिन मैं संदर्भ के साथ बहुत अधिक गड़बड़ करने से भी थक गया हूं क्योंकि यह उद्देश्य पर अनियंत्रित है क्योंकि यह अभी भी प्रगति पर एक काम है, इसलिए मैंने पढ़ा है।

क्या कोई भी इसी तरह के मुद्दे पर आया है?

Answer 1

मिले एक समाधान यहाँ: https://github.com/rackt/react-router/issues/975, और यहाँ: https://github.com/rackt/react-router/issues/1499

निर्माता में आवश्यक:

class SidebarFilter extends React.Component { 

    constructor(props, context) { 
     super(props, context); 

इसके अलावा एक स्थिर संपत्ति जोड़ने की जरूरत है http://rackt.github.io/react-router/#Navigation

डॉक्स से

:

SidebarFilter.contextTypes = { 
    router: React.PropTypes.func.isRequired 
}; 

तो मैं कह सकते हैं:

this.context.router.transitionTo(/path-to-link); 

Answer 2

प्रतिक्रिया-राउटर से Navigation मिश्रण पर एक नज़र डालें।

var Navigation = require('react-router').Navigation; 

React.createClass({ 
    mixins: [Navigation], 

    render: function() { 
    return (
     <div onClick={() => this.transitionTo('foo')}>Go to foo</div> 
     <div onClick={() => this.replaceWith('bar')}>Go to bar without creating a new history entry</div> 
     <div onClick={() => this.goBack()}>Go back</div> 
    ); 
    } 
}); 

Answer 3

आप प्रतिक्रिया-रूटर के लिए browserHistory का उपयोग कर रहे हैं, तो जीवन सरल है।

import {browserHistory} from "react-router"; 

functionName() { 
browserHistory.push("/path-to-link"); 
} 

Answer 4

प्रतिक्रिया राउटर के साथ समय बर्बाद करने के बाद, मैं अंततः मूल जावास्क्रिप्ट पर स्विच करता हूं।

1. आपकी रीडायरेक्ट के लिए एक घटक बनाएँ:

   मार्ग पथ = "*" घटक = {} NotFound

2. घटक उपयोग विंडो स्थान में पुनर्निर्देशित करने के लिए:

   componentDidMount() { 
        if (typeof window !== 'undefined') { 
         window.location.href = "http://foo.com/error.php"; 
        } 
   } 
   

Answer 5

ऐसी स्थिति में मैं आमतौर पर hashHistory या browserHistory निर्भरता का उपयोग करता हूं आप जो भी उपयोग कर रहे हैं उस पर एनजी और बस hashHistory.push(<url>) पर कॉल करें। यदि आप ईएस 6 कक्षाओं का उपयोग कर रहे हैं तो आप के लिए भी जा सकते हैं जो here के रूप में प्रतिक्रिया-राउटर द्वारा प्रदान किया गया है। यह उच्च आदेश घटक router नामक आपके घटक में एक प्रोप का खुलासा करता है। इस प्रोप का उपयोग करके आप this.props.router.push(<url>) का उपयोग करके रीडायरेक्ट कर सकते हैं।

यदि आपको संदर्भ से राउटर का उपयोग करना है तो आपको संदर्भ के प्रकारों को @ बेन के उत्तर में उल्लिखित करना होगा।