React-Router Bağlantıyı yeni sekmede aç

90

React Router'ın bağlantıyı yeni sekmede açmasını sağlamanın bir yolu var mı ? Bunu denedim ve işe yaramadı.

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

onClick="foo"Bağlantıya yukarıda sahip olduğum gibi bir şey ekleyerek kabartmak mümkündür , ancak bir konsol hatası olacaktır.

Teşekkürler.

reactjs react-router

— mcd
kaynak

41

Bence Link bileşeni bunun için desteğe sahip değil.

URL'nizi oluşturmak için bir etiket oluşturarak ve Navigasyon mixinin makeHref yöntemini kullanarak alternatif bir yola sahip olabilirsiniz.

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

— kullanıcı1369825
kaynak

burada href kendi kendine çağırma işlevini çağırıyor, yeniden render ALERT!

— Anupam Maurya

MakeHref işlevinin createHref olarak yeniden adlandırıldığına ve kaldırıldığından beri olduğuna inanıyorum. stackoverflow.com/a/35066996/6004931 github.com/ReactTraining/history/issues/365

— Nick Graham

82

React Router sürüm 5.0.1 ve üzeri sürümlerde şunları kullanabilirsiniz:

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

— HydRAnger
kaynak

47

React Router'ın şu anki sürümü nedir;)

— Abhishek Nalin

1

@AbhishekNalin this.makeHref nasıl alınır ve yan tarafa parametre gönderilir this.makeHref

— Dharmesh

15

React-router 5.0.1'de eklemek target="_blank"hile yapmak için yeterli görünüyor .

— mscrivo

7

Bu yorumu not alın . Kullanırsanız rel='noopener noreferrer'kullanıntarget="_blank"

— Gaspar

Teşekkür ederim! target="_blank"benim için çalıştı :) react-router

— 5.0.1'de

34

Aşağıdaki seçenekleri kullanabiliriz: -

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

Yönlendirmeye tepki vererek yeni sekmede açmak için üç seçenekten birini kullanabiliriz.

— Gorakh Nath
kaynak

bazı iPhone'lar "target = '_ blank" "öğesini yok sayar. Görünüşe göre bu, bu telefonlar için hala başarısız olacak.

— Deborah

3

Hakkında Not target='_blank': eklemenizi öneririz rel='noopener noreferrer'sizin için <a>etiketi

— çam deviren Filozof

19

Hedef için "{}" kullanabilirsiniz, sonra jsx ağlamaz

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

— Abbos Tajimov
kaynak

15

Harici bağlantı için Link yerine bir kod kullanmanız yeterlidir:

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

— Anthony Agbator
kaynak

1

Bunun nedeni rel="noopener noreferrer"burada bulunabilir mathiasbynens.github.io/rel-noopener

— Liron Lavi

13

React_router 1.0 ile başlayarak, sahne çapa etiketine aktarılacaktır. Doğrudan kullanabilirsiniz target="_blank". Burada tartışıldı: https://github.com/ReactTraining/react-router/issues/2188

— Dexter
kaynak

6

Benim durumumda başka bir işlev kullanıyorum.

Fonksiyon

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

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

— Ankit Kumar Rajpoot
kaynak

4

Basit yol, özelliği 'to' kullanmaktır:

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

— Bob Köle
kaynak

2

bu benim için iyi çalışıyor

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

— Ashad Nasim
kaynak

2

Yeni bir sekmede bir url açmak için, aşağıdaki gibi Bağlantı etiketini kullanabilirsiniz:

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

It en güzel akılda tutmak <Link>öğesi bir tercüme <a>elemanı ve gereği docs-yönlendirici-dom tepki Eğer vb başlık, kimlik SinifAdi olarak üzerinde olmak istiyorum, herhangi sahne iletebilirsiniz

— MMalke
kaynak

0

react-router'ı kullanırken yeni bir sekmede açmak için target = "_ blank" yeterlidir

örneğin: <Link to={/admin/posts/error-post-list/${this.props.errorDate}} target="_blank"> View Details </Link>

— Shrutika Shrutika
kaynak