React-Router apre il collegamento in una nuova scheda

C'è un modo per far sì che React Router apra un collegamento in una nuova scheda? Ho provato questo e non ha funzionato.

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

È possibile confonderlo aggiungendo qualcosa di simile onClick="foo"al Link come quello che ho sopra, ma ci sarebbe un errore della console.

Grazie.

Penso che il componente Link non abbia gli oggetti di scena per questo.

Puoi avere un modo alternativo creando un tag e utilizzare il metodo makeHref del mixin di navigazione per creare il tuo URL

<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 versione 5.0.1 e successive, puoi utilizzare:

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

Possiamo utilizzare le seguenti opzioni: -

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

Possiamo utilizzare una delle tre opzioni per aprire in una nuova scheda reagendo al routing.

Puoi usare "{}" per il bersaglio, quindi jsx non piangerà

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

Per il collegamento esterno è sufficiente utilizzare un achor al posto di Link:

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

A partire da react_router 1.0, gli oggetti di scena verranno passati al tag di ancoraggio. Puoi usare direttamente target="_blank". Discusso qui: https://github.com/ReactTraining/react-router/issues/2188

Nel mio caso, sto usando un'altra funzione.

Funzione

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

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

Il modo più semplice è usare la proprietà 'to':

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

questo funziona bene per me

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

Per aprire un URL in una nuova scheda, puoi utilizzare il tag Link come di seguito:

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

È bello tenere presente che l' <Link>elemento viene tradotto in un <a>elemento e, come per i documenti di react-router-dom , puoi passare tutti gli oggetti di scena che desideri siano presenti su di esso come titolo, id, className, ecc.

target = "_ blank" è sufficiente per aprirsi in una nuova scheda, quando si utilizza react-router

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