React-Router abre link em uma nova aba

Existe uma maneira de fazer o React Router abrir um link em uma nova guia? Eu tentei isso e não funcionou.

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

É possível modificá-lo adicionando algo semelhante onClick="foo"ao Link como o que eu tenho acima, mas haveria um erro de console.

Obrigado.

Acho que o componente Link não tem adereços para isso.

Você pode ter uma maneira alternativa de criar uma tag e usar o método makeHref do mixin de navegação para criar seu url

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

No React Router versão 5.0.1 e superior, você pode usar:

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

Podemos usar as seguintes opções: -

 // 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 qualquer uma das três opções para abrir uma nova guia pelo roteamento de reação.

Você pode usar "{}" para o alvo, então jsx não chorará

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

Para link externo, basta usar um achor no lugar de Link:

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

Começando com react_router 1.0, os adereços serão passados ​​para a tag âncora. Você pode usar diretamente target="_blank". Discutido aqui: https://github.com/ReactTraining/react-router/issues/2188

No meu caso, estou usando outra função.

Função

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

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

A maneira mais simples é usar a propriedade 'para':

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

Este trabalho é bom para mim

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

Para abrir um url em uma nova guia, você pode usar a tag Link conforme abaixo:

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

É bom ter em mente que o <Link>elemento é traduzido para um <a>elemento e, de acordo com os documentos react-router-dom , você pode passar quaisquer adereços que gostaria que estivessem nele, como title, id, className, etc.

target = "_ blank" é o suficiente para abrir em uma nova guia, quando você estiver usando o react-router

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