रिएक्ट-राउटर नए टैब में लिंक खोलें

Question

क्या नए टैब में लिंक खोलने के लिए रिएक्ट राउटर प्राप्त करने का एक तरीका है ? मैंने यह कोशिश की और यह काम नहीं किया।

<Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link>

onClick="foo"लिंक में कुछ जोड़कर इसे फुल करना संभव है जैसे कि मेरे पास क्या है, लेकिन एक कंसोल त्रुटि होगी।

धन्यवाद।

Answer 1

मुझे लगता है कि लिंक घटक के पास इसके लिए सहारा नहीं है।

आपके पास टैग बनाकर वैकल्पिक रास्ता हो सकता है और अपने यूआरएल को बनाने के लिए नेविगेशन मिक्सिन के मेक हर्फ तरीके का उपयोग कर सकते हैं

<a target='_blank' href={this.makeHref(routeConsts.CHECK_DOMAIN, {},
   { realm: userStore.getState().realms[0].name })}>
        Share this link to your webmaster
</a>

Comments

यहाँ यह href आत्म कॉलिंग फ़ंक्शन कह रहा है, यह ALERT को फिर से प्रस्तुत करेगा!

— अनुपम मौर्य

Answer 2

रिएक्ट राउटर संस्करण 5.0.1 और इसके बाद के संस्करण में, आप उपयोग कर सकते हैं:

<Link to="route" target="_blank" onClick={(event) => {event.preventDefault(); window.open(this.makeHref("route"));}} />

Comments

रिएक्ट राउटर का वर्तमान संस्करण क्या है?)

— अभिषेक नलिन

@AbhishekNalin इस.makeHref को कैसे प्राप्त करें और इस.makeHref के पक्ष में पैरामीटर भेजें

— DDD

प्रतिक्रिया-राउटर 5.0.1 में, ऐसा लगता target="_blank"है कि ट्रिक करने के लिए पर्याप्त है।

— mscrivo

इस टिप्पणी पर ध्यान दें । उपयोग rel='noopener noreferrer'करता है, तो आप का उपयोग करेंtarget="_blank"

— गैस्पर

धन्यवाद! target="_blank"मेरे लिए काम किया :) प्रतिक्रिया-राउटर 5.0.1 में

— राचिट मैगॉन

Answer 3

हम निम्नलिखित विकल्पों का उपयोग कर सकते हैं: -

 // first option is:-
    <Link to="myRoute" params={myParams} target="_blank">

 // second option is:-
    var href = this.props.history.createHref('myRoute', myParams);
    <a href={href} target="_blank">

 //third option is:-
    var href = '/myRoute/' + myParams.foo + '/' + myParams.bar;
    <a href={href} target="_blank">

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

Comments

कुछ iPhones "लक्ष्य = 'रिक्त" को अनदेखा करते हैं। ऐसा लगता है कि यह अभी भी उन फोन के लिए विफल हो जाएगा।

— देबोराह

के बारे में ध्यान दें target='_blank': rel='noopener noreferrer'अपने <a>टैग को जोड़ने की सिफारिश करें

— Blundering Philosopher

Answer 4

आप लक्ष्य के लिए "{}" का उपयोग कर सकते हैं, फिर jsx रोएगा नहीं

<Link target={"_blank"} to="your-link">Your Link</Link>

Comments

3.0.0 के साथ काम करता है, धन्यवाद

— A7DC

Answer 5

बाहरी लिंक के लिए बस लिंक के स्थान पर एक अचोर का उपयोग करें:

<a rel="noopener noreferrer" href="http://url.com" target="_blank">Link Here</a>

Comments

rel="noopener noreferrer"यहाँ पाया जा सकता है का कारण mathiasbynens.github.io/rel-noopener

— Liron Lavi

Answer 6

React_router 1.0 के साथ शुरू, props को लंगर टैग पर पारित किया जाएगा। आप सीधे उपयोग कर सकते हैं target="_blank"। यहां चर्चा की गई: https://github.com/ReactTraining/react-router/issues/2188

Answer 7

मेरे मामले में, मैं एक अन्य फ़ंक्शन का उपयोग कर रहा हूं।

समारोह

 function openTab() {
    window.open('https://play.google.com/store/apps/details?id=com.drishya');
  }

  <Link onClick={openTab}></Link>

Answer 8

सिम्प्ट्स तरीका है 'टू' प्रॉपर्टी का उपयोग करना:

<Link to="chart" target="_blank" to="http://link2external.page.com" >Test</Link>

Answer 9

यह मेरे लिए ठीक काम करता है

<Link to={`link`} target="_blank">View</Link>

Answer 10

एक नए टैब में एक url खोलने के लिए, आप नीचे दिए गए लिंक टैग का उपयोग कर सकते हैं:

<Link to="/yourRoute" target="_blank">
    Open YourRoute in a new tab
</Link>

यह ध्यान रखना अच्छा है कि <Link>तत्व एक <a>तत्व में अनुवादित हो जाता है , और प्रतिक्रिया-राउटर-डोम डॉक्स के अनुसार , आप किसी भी ऐसे प्रॉपर को पास कर सकते हैं जो आप इस पर रखना चाहते हैं जैसे शीर्षक, आईडी, क्लासनेम, आदि।

Answer 11

लक्ष्य = "_ रिक्त" एक नया टैब खोलने के लिए पर्याप्त है, जब आप प्रतिक्रिया-राउटर का उपयोग कर रहे हैं

उदाहरण के लिए: <Link to={/admin/posts/error-post-list/$endersthis.props.errorDate}} target="_blank"> View Details </Link>