React-Router öffnen Link in neuer Registerkarte

85

Gibt es eine Möglichkeit, React Router dazu zu bringen, einen Link in einem neuen Tab zu öffnen? Ich habe es versucht und es hat nicht funktioniert.

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

Es ist möglich, es zu flusen, indem Sie onClick="foo"dem Link so etwas wie das oben Gesagte hinzufügen , aber es würde einen Konsolenfehler geben.

Vielen Dank.

reactjs react-router

— mcd
quelle

36

Ich denke, die Link-Komponente hat nicht die Requisiten dafür.

Sie können eine alternative Möglichkeit haben, indem Sie ein Tag erstellen und die makeHref-Methode des Navigationsmixins verwenden, um Ihre URL zu erstellen

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

— user1369825
quelle

hier ruft es die selbstaufrufende Funktion href auf, es wird ein erneutes Rendern von ALERT verursachen!

— Anupam Maurya

74

In React Router Version 5.0.1 und höher können Sie Folgendes verwenden:

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

— hydRAnger
quelle

47

Was ist die aktuelle Version von React Router;)

— Abhishek Nalin

1

@AbhishekNalin Wie man this.makeHref bekommt und Parameter in Seite this.makeHref sendet

— DDD

15

In React-Router 5.0.1 scheint das Hinzufügen target="_blank"ausreichend zu sein, um den Trick auszuführen .

— Mscrivo

6

Beachten Sie diesen Kommentar. Verwenden rel='noopener noreferrer'Sie, wenn Sie verwendentarget="_blank"

— Gaspar

Vielen Dank! target="_blank"arbeitete für mich :) in React-Router 5.0.1

— Rachit Magon

33

Wir können die folgenden Optionen verwenden: -

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

Wir können eine der drei Optionen verwenden, um in einem neuen Tab zu öffnen, indem wir auf das Routing reagieren.

— Gorakh Nath
quelle

Einige iPhones ignorieren "target = '_ blank'". Es scheint, dass dies für diese Telefone immer noch fehlschlagen würde.

— Deborah

3

Hinweis zu target='_blank': Empfehlen Sie das Hinzufügen rel='noopener noreferrer'zu Ihrem <a>Tag

— Blundering Philosopher

16

Sie können "{}" für das Ziel verwenden, dann weint jsx nicht

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

— Abbos Tajimov
quelle

1

Funktioniert mit 3.0.0, danke

— A7DC

14

Verwenden Sie für externe Links einfach einen Anker anstelle von Link:

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

— Anthony Agbator
quelle

1

Den Grund dafür rel="noopener noreferrer"finden Sie hier mathiasbynens.github.io/rel-noopener

— Liron Lavi

13

Beginnend mit react_router 1.0 werden die Requisiten an das Ankertag übergeben. Sie können direkt verwenden target="_blank". Hier besprochen: https://github.com/ReactTraining/react-router/issues/2188

— Dexter
quelle

6

In meinem Fall verwende ich eine andere Funktion.

Funktion

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

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

— Ankit Kumar Rajpoot
quelle

4

Die einfache Möglichkeit besteht darin, die Eigenschaft 'to' zu verwenden:

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

— Bob Slave
quelle

2

Das funktioniert gut für mich

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

— Ashad Nasim
quelle

1

Um eine URL in einem neuen Tab zu öffnen, können Sie das Link-Tag wie folgt verwenden:

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

Es ist schön zu bedenken, dass das <Link>Element in ein <a>Element übersetzt wird. Gemäß den React -Router-Dom-Dokumenten können Sie alle Requisiten übergeben, die Sie darauf haben möchten, z. B. Titel, ID, Klassenname usw.

— MMalke
quelle

0

target = "_ blank" reicht aus, um in einem neuen Tab zu öffnen, wenn Sie den React-Router verwenden

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

— Shrutika Shrutika
quelle