दिलचस्प पोस्ट
InetAddress.getLocalHost () फेंकता UnknownHostException XSLT XML स्रोत के साथ जिसमें xmlns पर सेट एक डिफ़ॉल्ट नेमस्पेस है क्या मैं रनटाइम पर एक .NET विधानसभा को लोड कर सकता हूँ और केवल एक ही नाम जानकर एक प्रकार का इन्स्टॉलेशन कर सकता हूँ? क्या होगा अगर मैं एक अहस्ताक्षरित चर के लिए एक नकारात्मक मान निर्दिष्ट करता हूँ? पर्ल में एक स्ट्रिंग में फ़ाइल को गलाने का सबसे अच्छा तरीका क्या है? जावा जेडीबीसी – एसएडी के बजाय ओरेकल से सेवा नाम का उपयोग कैसे करें ऋणात्मक संख्या का मोड मेरे दिमाग को पिघल रहा है IE8 प्रदर्शन इनलाइन-ब्लॉक काम नहीं कर रहा है सीकेके में सी ++ 11 सक्रिय कैसे करें? पायथन कोई भी तुलना नहीं: क्या मुझे "है" या == का उपयोग करना चाहिए? 'आकार_टी' बनाम कंटेनर :: आकार_प्रकार ' NullPointerException ऑब्जेक्ट्स का एक अर्रे बनाना डाटाबेसअरेरः वर्तमान लेन-देन को निरस्त किया गया है, लेन-देन ब्लॉक के अंत तक अनदेखा करने वाले आदेश आईओएस 5 में नियंत्रक नियंत्रण कैसे दिखता है? नेस्टेड शब्दकोशों को लागू करने का सबसे अच्छा तरीका क्या है?

प्रोग्रामर रूटर V4 का उपयोग करके नेविगेट करें

मैंने अभी react-router से react-router v3 से v4 तक बदल दिया है।
लेकिन मुझे यकीन नहीं है कि किसी Component के सदस्य फ़ंक्शन में प्रोग्रामेटिक रूप से नेविगेट कैसे करें। यानी handleClick() फ़ंक्शन में मैं /path/some/where कुछ डेटा प्रोसेस करने के बाद नेविगेट करना चाहता हूं। मैं ये करता था कि:

 import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') 

लेकिन मुझे वी 4 में ऐसा इंटरफेस नहीं मिला।
मैं v4 का उपयोग कैसे कर सकता हूं?

वेब के समाधान से एकत्रित समाधान "प्रोग्रामर रूटर V4 का उपयोग करके नेविगेट करें"

यदि आप ब्राउज़र परिवेश को लक्षित कर रहे हैं, तो आपको react-router-dom बजाय react-router-dom पैकेज का उपयोग करना होगा। सूक्ष्म अंतर के साथ कोर, ( react ) और प्लेटफ़ॉर्म विशिष्ट कोड, ( react-dom , react-native ) को अलग करने के लिए वे दो अलग-अलग संकुल को स्थापित करने की आवश्यकता नहीं है, जैसा कि वे प्रतिक्रिया के अनुसार समान दृष्टिकोण का अनुसरण कर रहे हैं , इसलिए पर्यावरण पैकेज में आपके लिए सब कुछ शामिल है आप इसे अपनी प्रोजेक्ट में जोड़ सकते हैं:

yarn add react-router-dom

या

npm i -S react-router-dom

सबसे पहले आपको यह करना है कि आपके <BrowserRouter> को सबसे अधिक मूल घटक प्रदान करना है। <BrowserRouter> HTML5 history एपीआई का उपयोग करता है और इसे आपके लिए प्रबंधित करता है, इसलिए आपको अपने आप को इन्स्तांत करने और <BrowserRouter> रूप में <BrowserRouter> घटक के रूप में इसे पारित करने की चिंता करने की ज़रूरत नहीं है (जैसा कि आप पिछले संस्करणों में करने की आवश्यकता थी)।

वी 4 में, प्रोग्रामेटिक रूप से नेविगेट करने के लिए आपको history ऑब्जेक्ट तक पहुंचने की आवश्यकता है, जो कि context माध्यम से उपलब्ध context , जब तक आपके पास <BrowserRouter> प्रदाता घटक आपके आवेदन में शीर्ष सबसे अधिक अभिभावक है। लाइब्रेरी संदर्भ के माध्यम से router ऑब्जेक्ट को उजागर करती है, जिसमें स्वयं एक संपत्ति के रूप में history होता है history इंटरफ़ेस कई नेविगेशन विधियों को प्रदान करता है, जैसे कि push , replace और goBack , दूसरों के बीच। आप यहां संपत्तियों और विधियों की पूरी सूची देख सकते हैं ।

रेडक्स / मोबक्स के उपयोगकर्ताओं के लिए महत्वपूर्ण नोट

यदि आप redux या mobx को अपने आवेदन में अपनी राज्य प्रबंधन लाइब्रेरी के रूप में उपयोग कर रहे हैं, तो आप घटकों के स्थान के साथ मुद्दों पर आ सकते हैं-पता है कि यूआरएल अपडेट को ट्रिगर करने के बाद फिर से प्रस्तुत नहीं किया जाता है

ऐसा इसलिए हो रहा है क्योंकि react-router संदर्भ मॉडल का उपयोग करके घटकों को location है।

कनेक्ट और पर्यवेक्षक दोनों घटक बनाते हैं, जिनके कम्पेनेंट अपडेट तरीकों को उनके मौजूदा प्रोप और उनके अगले प्रोप के उथले तुलना करते हैं। उन घटकों का पुन: रेंडर होगा, जब कम से कम एक प्रोप बदल जाएगा। इसका मतलब यह है कि स्थान परिवर्तन करने पर उन्हें अपडेट करने के लिए उन्हें स्थानांतरित करने के बाद बदलाव करने की आवश्यकता होगी।

यह हल करने के लिए 2 दृष्टिकोण हैं:

  • पथ रहित <Route /> में आपके कनेक्टेड घटक को लपेटें वर्तमान location ऑब्जेक्ट एक प्रकार का रक्षक है जो कि <Route> उस घटक को भेजता है जो उसे प्रतिपादित करता है
  • withRouter उच्च-क्रम वाले घटक के साथ अपने कनेक्टेड घटक को लपेटें, जो वास्तव में एक ही प्रभाव पड़ता है और location को एक सहारा के रूप में पेश करता है

एक तरफ सेट करना, प्रोग्रामेटिक रूप से नेविगेट करने के चार तरीकों से अनुशंसा की जाती है:

1.- एक <Route> घटक <Route> उपयोग करना

यह एक घोषणात्मक शैली को बढ़ावा देता है V4 से पहले, <Route /> घटकों को आपके घटक पदानुक्रम के शीर्ष पर रखा गया था, इससे पहले कि आप अपने मार्ग संरचनाओं के बारे में सोचते हैं। हालांकि, अब आपके पास अपने पेड़ में कहीं भी <Route> घटक हो सकते हैं, जिससे आपको यूआरएल के आधार पर सशर्त रूप से रेंडरिंग के लिए बेहतर नियंत्रण मिल सके। Route आपके घटक में match , location और history को सहारा देता है। नेविगेशन विधियों (जैसे push , replace , goBack …) history वस्तु के गुणों के रूप में उपलब्ध हैं

एक Route साथ कुछ रेंडर करने के लिए 3 तरीके हैं, या तो component का उपयोग करके, render या children प्रोप करें, लेकिन एक ही Route में एक से अधिक का उपयोग न करें। विकल्प उपयोग के मामले पर निर्भर करता है, लेकिन मूल रूप से पहले दो विकल्प केवल आपके घटक प्रदान करते हैं यदि path यूआरएल स्थान से मेल खाता है, जबकि children के साथ घटक प्रदान किया जाएगा कि क्या पथ स्थान से मेल खाता है या नहीं (यूआई आधारित समायोजन के लिए उपयोगी है यूआरएल मिलान पर)

यदि आप अपने घटक रेंडरिंग आउटपुट को कस्टमाइज़ करना चाहते हैं , तो आपको अपने घटक को फ़ंक्शन में लपेटकर render विकल्प का उपयोग करना होगा, ताकि आप अपने घटक को match , location और history अलावा, किसी अन्य रंगमंच को पार कर सकें। उदाहरण के लिए उदाहरण:

 import { BrowserRouter as Router } from 'react-router-dom' const ButtonToNavigate = ({ title, history }) => ( <button type="button" onClick={() => history.push('/my-new-location')} > {title} </button> ); const SomeComponent = () => ( <Route path="/" render={(props) => <ButtonToNavigate {...props} title="Navigate elsewhere" />} /> ) const App = () => ( <Router> <SomeComponent /> // Notice how in v4 we can have any other component interleaved <AnotherComponent /> </Router> ); 

2.- withRouter एचओसी के साथ प्रयोग करना

यह उच्च ऑर्डर घटक Route रूप में एक समान प्रक्षेपण करेगा। हालांकि, यह सीमा के साथ किया जाता है कि आप प्रति फाइल में केवल 1 होईसी कर सकते हैं।

 import { withRouter } from 'react-router-dom' const ButtonToNavigate = ({ history }) => ( <button type="button" onClick={() => history.push('/my-new-location')} > Navigate </button> ); ButtonToNavigate.propTypes = { history: React.PropTypes.shape({ push: React.PropTypes.func.isRequired, }).isRequired, }; export default withRouter(ButtonToNavigate); 

3.- एक Redirect घटक का उपयोग करना

एक <Redirect> प्रदान करना एक नया स्थान पर नेविगेट करेगा लेकिन ध्यान रखें कि, डिफ़ॉल्ट रूप से , मौजूदा स्थान को एक नए सर्वर द्वारा प्रतिस्थापित किया जाता है, जैसे सर्वर साइड रीडायरेक्ट (HTTP 3xx)। नया स्थान सहारा देने के to प्रदान किया to है, जो स्ट्रिंग (रीडायरेक्ट करने के लिए यूआरएल) या location ऑब्जेक्ट हो सकता है। यदि आप इसके बजाय इतिहास पर एक नई प्रविष्टि को पुश करना चाहते हैं, तो push रपट भी पास करें और उसे true सेट करें

 <Redirect to="/your-new-location" push /> 

4.- संदर्भ के माध्यम से मैन्युअल router एक्सेस करना

थोड़ा निराश क्योंकि संदर्भ अब भी एक प्रयोगात्मक API है और यह भविष्य के रिलीज में बदलाव / बदलाव को बदलने की संभावना है

 const ButtonToNavigate = (props, context) => ( <button type="button" onClick={() => context.router.history.push('/my-new-location')} > Navigate to a new location </button> ); ButtonToNavigate.contextTypes = { router: React.PropTypes.shape({ history: React.PropTypes.object.isRequired, }), }; 

यह कहने की ज़रूरत नहीं है कि अन्य राउटर घटक भी हैं जो गैर-ब्राउज़र पारिस्थितिक तंत्र के लिए होते हैं, जैसे कि <NativeRouter> जो कि एक नेविगेशन स्टैक को स्मृति और लक्ष्य में प्रतिकृति करता है, react-router-native पैकेज के माध्यम से उपलब्ध मूल प्लेटफ़ॉर्म पर react-router-native

किसी भी अन्य संदर्भ के लिए, सरकारी डॉक्स पर नज़र डालने में संकोच न करें। लाइब्रेरी के सह-लेखकों में से एक के द्वारा बनाई गई एक वीडियो भी है जो रिएक्शन-रूटर v4 के लिए बहुत अच्छा परिचय प्रदान करता है, जो कुछ प्रमुख परिवर्तनों को उजागर करता है।

इसे करने का सबसे आसान तरीका:

this.props.history.push("/new/url")

ध्यान दें:

  • हो सकता है कि आप पेरेंट कंपोनेंट से prop को उस घटक तक भेजना चाहें, जिससे आप कार्रवाई नहीं कर सकें, यदि यह उपलब्ध नहीं है।

रिएक्ट-राउटर v4 पर माइग्रेट करते समय मेरे पास एक समान समस्या थी, इसलिए मैं नीचे दिए गए समाधान को समझाने की कोशिश करूंगा

कृपया इस उत्तर को इस समस्या को हल करने का सही तरीके से मत समझो, मुझे लगता है कि एक अच्छा मौका होगा जैसा कि बेहतर रूटर रूटर v4 अधिक परिपक्व हो जाता है और बीटा छोड़ देता है (यह पहले से मौजूद हो सकता है और मैं इसे खोज नहीं पाया) ।

संदर्भ के लिए, मुझे इस समस्या थी क्योंकि मैं कभी Redux-Saga कभी Redux-Saga का उपयोग करने के लिए प्रोग्राम ऑब्जेक्ट को प्रोग्रामेटिक रूप से बदलने के लिए कहता हूं (जब कोई उपयोगकर्ता सफलतापूर्वक प्रमाणित करता है)

प्रतिक्रिया राउटर डॉक्स में, <Router> घटक पर एक नज़र डालें और आप देख सकते हैं कि आपके पास अपना इतिहास ऑब्जेक्ट को एक सहारा के माध्यम से पास करने की क्षमता है यह समाधान का सार है – हम एक वैश्विक मॉड्यूल से React-Router को इतिहास वस्तु प्रदान करते हैं

कदम:

  1. इतिहास एनपीएम मॉड्यूल इंस्टॉल करें – yarn add history या npm install history --save
  2. अपने App.js history.js App.js लेवल फ़ोल्डर में history.js नामक एक फ़ाइल बनाएं (यह मेरी वरीयता थी)

     // src/history.js import createHistory from 'history/createBrowserHistory'; export default createHistory();` 
  3. इस इतिहास वस्तु को अपने रूटर घटक को इतना जोड़ें जैसे कि

     // src/App.js import history from '../your/path/to/history.js;' <Router history={history}> // Route tags here </Router> 
  4. अपने वैश्विक इतिहास ऑब्जेक्ट को आयात करने से पहले URL को समायोजित करें:

     import history from '../your/path/to/history.js;' history.push('new/path/here/'); 

सब कुछ अब तक समन्वयित रहना चाहिए, और आपके पास इतिहास वस्तु को प्रोग्रामेटिक रूप से सेट करने और किसी घटक / कंटेनर के माध्यम से नहीं करने का एक तरीका भी है

टी एल; डॉ:

 if (navigate) { return <Redirect to="/" push={true} /> } 

सरल और घोषणात्मक उत्तर है कि आपको setState() साथ संयोजन में <Redirect to={URL} push={boolean} /> का उपयोग करने की आवश्यकता है

धक्का: बूलियन – जब सही होता है, तो रीडायरेक्टिंग एक मौजूदा प्रविष्टि के बजाय इतिहास पर एक नई प्रविष्टि धक्का देगा।


 import { Redirect } from 'react-router' class FooBar extends React.Component { state = { navigate: false } render() { const { navigate } = this.state // here is the important part if (navigate) { return <Redirect to="/" push={true} /> } // ^^^^^^^^^^^^^^^^^^^^^^^ return ( <div> <button onClick={() => this.setState({ navigate: true })}> Home </button> </div> ) } } 

पूर्ण उदाहरण यहाँ । यहां अधिक पढ़ें

पुनश्च। उदाहरण राज्य शुरू करने के लिए ईएस 7 + प्रॉपर्टी इन्लीरिअलाइज़ का उपयोग करता है। यहां पर भी देखें, यदि आप रुचि रखते हैं

मेरा जवाब एलेक्स के समान है मुझे यकीन नहीं है कि रिएक्ट-राउटर ने इतना अनावश्यक रूप से जटिल क्यों बनाया। मुझे एक अनिवार्य रूप से ग्लोबल की पहुंच प्राप्त करने के लिए अपने घटक को एक HoC के साथ क्यों लपाना चाहिए?

वैसे भी, यदि आपने देखा कि उन्होंने कैसे <BrowserRouter> कार्यान्वित किया है, तो यह इतिहास के आस-पास सिर्फ एक छोटा आवरण है

हम उस इतिहास को बाहर निकाल सकते हैं ताकि हम इसे कहीं से भी आयात कर सकें। चाल, हालांकि, यदि आप सर्वर-साइड रेंडरिंग कर रहे हैं और आप इतिहास मॉड्यूल import करने का प्रयास करते हैं, तो यह काम नहीं करेगा क्योंकि यह ब्राउज़र-केवल एपीआई का उपयोग करता है लेकिन यह ठीक है क्योंकि हम आमतौर पर केवल एक क्लिक या किसी अन्य क्लाइंट-साइड ईवेंट के जवाब में रीडायरेक्ट करते हैं। इस प्रकार यह शायद नकली करने के लिए ठीक है:

 // history.js if(__SERVER__) { module.exports = {}; } else { module.exports = require('history').createBrowserHistory(); } 

वेबपैक की मदद से, हम कुछ वार्स को परिभाषित कर सकते हैं ताकि हम जानते हो कि हम किस वातावरण में हैं:

 plugins: [ new DefinePlugin({ '__SERVER__': 'false', '__BROWSER__': 'true', // you really only need one of these, but I like to have both }), 

और अब आप कर सकते हैं

 import history from './history'; 

कहीं से भी। यह सिर्फ सर्वर पर रिक्त मॉड्यूल लौटाएगा।

यदि आप इन जादू वार्स का इस्तेमाल नहीं करना चाहते हैं, तो आपको उस वैश्विक ऑब्जेक्ट की require जहां इसकी आवश्यकता है (आपके ईवेंट हैंडलर के अंदर)। import काम नहीं करेगा क्योंकि यह केवल शीर्ष-स्तर पर कार्य करता है

अब मैं कुछ दिनों के लिए v4 का परीक्षण कर रहा हूं और .. मैं अब तक इसे प्यार करता हूँ! यह कुछ समय बाद ही समझ में आता है

मेरे पास एक ही सवाल था और मैंने इसे संभाल लिया जैसा कि निम्नलिखित काम सबसे अच्छा (और यह भी हो सकता है कि यह कैसे करना है)। यह राज्य, एक टर्नेरी ऑपरेटर और <Redirect> का उपयोग करता है

निर्माता में ()

 this.state = { redirectTo: null } this.clickhandler = this.clickhandler.bind(this); 

रेंडर में ()

 render(){ return ( <div> { this.state.redirectTo ? <Redirect to={{ pathname: this.state.redirectTo }} /> : ( <div> .. <button onClick={ this.clickhandler } /> .. </div> ) } 

क्लिकहैंडलर () में

  this.setState({ redirectTo: '/path/some/where' }); 

आशा करता हूँ की ये काम करेगा। मुझे बताएं।

यह भी बस प्रोप का उपयोग कर सकते हैं: this.props.history.push ('new_url')

जैसा कि कभी-कभी मैं बटन के द्वारा अनुप्रयोगों द्वारा मार्गों को स्विच करना पसंद करता हूं, यह मेरे लिए कम से कम काम करने वाला उदाहरण है जो काम करता है:

 import { Component } from 'react' import { BrowserRouter as Router, Link } from 'react-router-dom' class App extends Component { constructor(props) { super(props) /** @type BrowserRouter */ this.router = undefined } async handleSignFormSubmit() { await magic() this.router.history.push('/') } render() { return ( <Router ref={ el => this.router = el }> <Link to="/signin">Sign in</Link> <Route path="/signin" exact={true} render={() => ( <SignPage onFormSubmit={ this.handleSignFormSubmit } /> )} /> </Router> ) } } 

चूंकि इस भयानक डिजाइन से निपटने का कोई दूसरा तरीका नहीं है, इसलिए मैंने एक सामान्य घटक लिखा है जो withRouter एचओसी दृष्टिकोण के साथ उपयोग करता है। नीचे दिए गए उदाहरण में एक button तत्व लपेटा जा रहा है, लेकिन आप किसी भी क्लिक करने योग्य तत्व को बदल सकते हैं जिसकी आपको आवश्यकता है:

 import React from 'react'; import PropTypes from 'prop-types'; import { withRouter } from 'react-router-dom'; const NavButton = (props) => ( <Button onClick={() => props.history.push(props.to)}> {props.children} </Button> ); NavButton.propTypes = { history: PropTypes.shape({ push: PropTypes.func.isRequired }), to: PropTypes.string.isRequired }; export default withRouter(NavButton); 

उपयोग:

 <NavButton to="/somewhere">Click me</NavButton> 

चरण 1: शीर्ष पर आयात करने के लिए केवल एक ही चीज़ है:

  import {Route} from 'react-router-dom'; 

चरण 2: अपने रूट में, इतिहास पास करें:

  <Route exact path='/posts/add' render={({history}) => ( <PostAdd history={history} /> .)}/> 

चरण 3: इतिहास को अगले घटक में सहारा के भाग के रूप में स्वीकार किया जाता है, ताकि आप आसानी से:

  this.props.history.push('/'); 

यह आसान और वास्तव में शक्तिशाली था

मैं कुछ समय के लिए इस के साथ संघर्ष किया – कुछ बहुत आसान है, अभी तक बहुत जटिल है, क्योंकि ReactJS वेब अनुप्रयोगों को लिखने का सिर्फ एक बिल्कुल अलग तरीका है, यह हमारे लिए बहुत पुरानी है पुरानी लोक!

मैंने गड़बड़ी को सार के लिए एक अलग घटक बनाया:

 // LinkButton.js import React from "react"; import PropTypes from "prop-types"; import {Route} from 'react-router-dom'; export default class LinkButton extends React.Component { render() { return ( <Route render={({history}) => ( <button {...this.props} onClick={() => { history.push(this.props.to) }}> {this.props.children} </button> )}/> ); } } LinkButton.propTypes = { to: PropTypes.string.isRequired }; 

फिर इसे अपने render() विधि में जोड़ें:

 <LinkButton className="btn btn-primary" to="/location"> Button Text </LinkButton>