React-Router abre el enlace en una nueva pestaña

¿Hay alguna forma de hacer que React Router abra un enlace en una nueva pestaña? Intenté esto y no funcionó.

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

Es posible suavizarlo agregando algo como onClick="foo"el enlace que tengo arriba, pero habría un error de consola.

Gracias.

Creo que el componente Link no tiene los accesorios necesarios.

Puede tener una forma alternativa creando una etiqueta y utilizando el método makeHref de Navigation mixin para crear su URL

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

En React Router versión 5.0.1 y superior, puede usar:

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

Podemos utilizar las siguientes opciones: -

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

Podemos usar cualquiera de las tres opciones para abrir una nueva pestaña reaccionando enrutamiento.

Puedes usar "{}" para el objetivo, entonces jsx no llorará

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

Para un enlace externo, simplemente use un acor en lugar de Link:

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

A partir de react_router 1.0, los accesorios se pasarán a la etiqueta de anclaje. Puede usar directamente target="_blank". Discutido aquí: https://github.com/ReactTraining/react-router/issues/2188

En mi caso, estoy usando otra función.

Función

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

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

La forma más simple es usar la propiedad 'to':

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

Esto funciona bien para mi

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

Para abrir una URL en una nueva pestaña, puede utilizar la etiqueta Enlace como se muestra a continuación:

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

Es bueno tener en cuenta que el <Link>elemento se traduce a un <a>elemento y, según los documentos de react-router-dom , puede pasar cualquier accesorio que le gustaría incluir, como título, id, className, etc.

target = "_ blank" es suficiente para abrir en una nueva pestaña, cuando estás usando react-router

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