React-Router abre link em uma nova aba

89

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.

reactjs react-router

— mcd
fonte

41

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>

— user1369825
fonte

aqui está chamando a função de auto-chamada href, isso causará uma nova renderização do ALERTA!

— Anupam Maurya de

Acredito que a função makeHref foi renomeada para createHref e, desde então, removida. stackoverflow.com/a/35066996/6004931 github.com/ReactTraining/history/issues/365

— Nick Graham

82

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

— HydRAnger
fonte

47

qual é a versão atual do React Router;)

— Abhishek Nalin

1

@AbhishekNalin Como obter this.makeHref e enviar parâmetro no lado this.makeHref

— Dharmesh

15

No react-router 5.0.1, parece que adicionar target="_blank"é suficiente para resolver o problema.

— mscrivo

7

Observe este comentário. Use rel='noopener noreferrer'se você usartarget="_blank"

— Gaspar

Obrigado! target="_blank"funcionou para mim :) no react-router 5.0.1

— Rachit Magon

34

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.

— Gorakh Nath
fonte

alguns iPhones ignoram "target = '_ blank'". Parece que isso ainda falharia para esses telefones.

— Deborah

3

Observação sobre target='_blank': recomendar adicionar rel='noopener noreferrer'à sua <a>tag

— Blundering Philosopher

19

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

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

— Abbos Tajimov
fonte

15

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

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

— Anthony Agbator
fonte

1

O motivo do rel="noopener noreferrer"pode ser encontrado aqui mathiasbynens.github.io/rel-noopener

— Liron Lavi

13

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

— Dexter
fonte

6

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>

— Ankit Kumar Rajpoot
fonte

4

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

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

— Bob Slave
fonte

2

Este trabalho é bom para mim

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

— Ashad Nasim
fonte

2

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.

— MMalke
fonte

0

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>

— Shrutika Shrutika
fonte