React-Router öffnen Link in neuer Registerkarte

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.

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>

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"));}} />

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.

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

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

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>

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

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>

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

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

Das funktioniert gut für mich

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

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.

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>