React-Router mở Liên kết trong tab mới

85

Có cách nào để React Router mở một liên kết trong tab mới không? Tôi đã thử điều này và nó không hoạt động.

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

Có thể đánh lừa nó bằng cách thêm một cái gì đó như thế onClick="foo"vào Liên kết như những gì tôi có ở trên, nhưng sẽ có một lỗi bảng điều khiển.

Cảm ơn.

reactjs react-router

— mcd
nguồn

36

Tôi nghĩ rằng thành phần Liên kết không có đạo cụ cho nó.

Bạn có thể có cách thay thế bằng cách tạo thẻ và sử dụng phương thức makeHref của Mixin điều hướng để tạo url của mình

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

— người dùng1369825
nguồn

ở đây nó đang gọi hàm tự gọi href, nó sẽ gây ra cảnh báo re-render!

— Anupam Maurya

74

Trong React Router phiên bản 5.0.1 trở lên, bạn có thể sử dụng:

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

— hydRAnger
nguồn

47

Phiên bản hiện tại của React Router là gì;)

— Abhishek Nalin

1

@AbhishekNalin Làm thế nào để lấy this.makeHref và gửi tham số ở bên this.makeHref

— DDD

15

Trong react-router 5.0.1, có vẻ như việc thêm vào target="_blank"là đủ để thực hiện thủ thuật.

— mscrivo

6

Lưu ý nhận xét này . Sử dụng rel='noopener noreferrer'nếu bạn sử dụngtarget="_blank"

— Gaspar

Cảm ơn bạn! target="_blank"đã làm việc cho tôi :) trong react-router 5.0.1

— Rachit Magon

33

Chúng tôi có thể sử dụng các tùy chọn sau: -

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

Chúng tôi có thể sử dụng một trong ba tùy chọn để mở trong tab mới bằng cách định tuyến phản ứng.

— Gorakh Nath
nguồn

một số iPhone bỏ qua "target = '_ blank'". Có vẻ như điều này vẫn sẽ thất bại đối với những chiếc điện thoại đó.

— Deborah,

3

Lưu ý về target='_blank': khuyên bạn nên thêm rel='noopener noreferrer'vào <a>thẻ của bạn

— Nhà triết học sai lầm vào

16

Bạn có thể sử dụng "{}" cho mục tiêu, sau đó jsx sẽ không khóc

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

— Abbos Tajimov
nguồn

1

Hoạt động với 3.0.0, cảm ơn

— A7DC

14

Đối với liên kết bên ngoài, chỉ cần sử dụng một achor thay cho Liên kết:

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

— Anthony Agbator
nguồn

1

Lý do cho điều này rel="noopener noreferrer"có thể được tìm thấy ở đây mathiasbynens.github.io/rel-noopener

— Liron Lavi

13

Bắt đầu với react_router 1.0, các đạo cụ sẽ được chuyển vào thẻ anchor. Bạn có thể trực tiếp sử dụng target="_blank". Thảo luận tại đây: https://github.com/ReactTraining/react-router/issues/2188

— dexter
nguồn

6

Trong trường hợp của tôi, tôi đang sử dụng một chức năng khác.

Chức năng

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

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

— Ankit Kumar Rajpoot
nguồn

4

Cách đơn giản là sử dụng thuộc tính 'to':

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

— Bob Slave
nguồn

2

Cái này làm việc tốt cho tôi

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

— Ashad Nasim
nguồn

1

Để mở url trong tab mới, bạn có thể sử dụng thẻ Liên kết như bên dưới:

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

Thật tuyệt khi lưu ý rằng <Link>phần tử được dịch sang một <a>phần tử và theo tài liệu react-router-dom , bạn có thể chuyển bất kỳ đạo cụ nào bạn muốn có trên nó như tiêu đề, id, className, v.v.

— MMalke
nguồn

0

target = "_ blank" đủ để mở trong tab mới, khi bạn đang sử dụng bộ định tuyến phản ứng

ví dụ: <Link to={/admin/posts/error-post-list/${this.props.errorDate}} target="_blank"> View Details </Link>

— Shrutika Shrutika
nguồn