React-Router เปิดลิงค์ในแท็บใหม่

มีวิธีรับReact Routerเพื่อเปิดลิงค์ในแท็บใหม่หรือไม่? ฉันลองสิ่งนี้แล้วก็ไม่ได้ผล

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

เป็นไปได้ที่จะทำให้ยุ่งเหยิงโดยการเพิ่มสิ่งที่ต้องการonClick="foo"ลงในลิงก์เช่นเดียวกับที่ฉันมีด้านบน แต่จะมีข้อผิดพลาดคอนโซล

ขอบคุณ.

ฉันคิดว่าคอมโพเนนต์ลิงก์ไม่มีอุปกรณ์ประกอบฉาก

คุณสามารถมีทางเลือกอื่นได้โดยสร้างแท็กและใช้เมธอด makeHref ของ Navigation mixin เพื่อสร้าง url ของคุณ

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

ใน React Router เวอร์ชัน 5.0.1 ขึ้นไปคุณสามารถใช้:

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

เราสามารถใช้ตัวเลือกต่อไปนี้: -

 // 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">

เราสามารถใช้ตัวเลือกใดตัวเลือกหนึ่งจากสามตัวเลือกเพื่อเปิดในแท็บใหม่

คุณสามารถใช้ "{}" สำหรับเป้าหมายแล้ว jsx จะไม่ร้องไห้

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

สำหรับลิงก์ภายนอกให้ใช้ achor แทนลิงก์:

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

เริ่มต้นด้วย react_router 1.0 อุปกรณ์ประกอบฉากจะถูกส่งต่อไปยังแท็กจุดยึด คุณสามารถใช้target="_blank". พูดคุยที่นี่: https://github.com/ReactTraining/react-router/issues/2188

ในกรณีของฉันฉันกำลังใช้ฟังก์ชันอื่น

ฟังก์ชัน

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

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

วิธีง่ายๆคือการใช้คุณสมบัติ 'ถึง':

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

มันใช้ได้ดีสำหรับฉัน

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

หากต้องการเปิด url ในแท็บใหม่คุณสามารถใช้แท็ก Link ดังต่อไปนี้:

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

โปรดทราบว่า<Link>องค์ประกอบได้รับการแปลเป็น<a>องค์ประกอบและตามเอกสารreact-router-domคุณสามารถส่งผ่านอุปกรณ์ประกอบฉากที่คุณต้องการให้เป็นเช่น title, id, className เป็นต้น

target = "_ blank" เพียงพอที่จะเปิดในแท็บใหม่เมื่อคุณใช้ react-router

เช่น <Link to={/admin/posts/error-post-list/${this.props.errorDate}} target="_blank"> View Details </Link>