React-Router otwórz Link w nowej karcie

86

Czy istnieje sposób, aby React Router otworzył łącze w nowej karcie? Próbowałem tego i nie udało się.

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

Można go spuścić, dodając coś podobnego onClick="foo"do linku, takiego jak to, co mam powyżej, ale wystąpiłby błąd konsoli.

Dzięki.

reactjs react-router mcd
źródło

Odpowiedzi:

36

Myślę, że komponent Link nie ma do tego rekwizytów.

Możesz mieć alternatywny sposób, tworząc tag i używając metody makeHref elementu Navigation mixin, aby utworzyć swój adres URL

<a target='_blank' href={this.makeHref(routeConsts.CHECK_DOMAIN, {},
   { realm: userStore.getState().realms[0].name })}>
        Share this link to your webmaster
</a>
user1369825
źródło
tutaj wywołuje funkcję samowywołującą href, spowoduje to ponowne renderowanie ALERT!
Anupam Maurya
75

W React Router w wersji 5.0.1 i nowszych możesz użyć:

<Link to="route" target="_blank" onClick={(event) => {event.preventDefault(); window.open(this.makeHref("route"));}} />
hydRAnger
źródło
47
jaka jest aktualna wersja React Router;)
Abhishek Nalin
1
@AbhishekNalin Jak zdobyć this.makeHref i wysłać parametr w side this.makeHref
DDD
15
W React-routerze 5.0.1 wydaje się, że dodanie target="_blank"wystarczy, aby załatwić sprawę .
mscrivo,
6
Zwróć uwagę na ten komentarz. Użyj, rel='noopener noreferrer'jeśli używasztarget="_blank"
Gaspar
Dziękuję Ci! target="_blank"zadziałało dla mnie :) w
React
34

Możemy skorzystać z następujących opcji: -

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

Możemy użyć jednej z trzech opcji, aby otworzyć w nowej karcie, reagując na routing.

Gorakh Nath
źródło
niektóre iPhone'y ignorują „target = '_ blank'”. Wygląda na to, że w przypadku tych telefonów to nadal nie powiedzie się.
Deborah
3
Uwaga na temat target='_blank': zalecamy dodanie rel='noopener noreferrer'do <a>tagu
Blundering Philosopher
16

Możesz użyć „{}” jako celu, wtedy jsx nie będzie płakać

<Link target={"_blank"} to="your-link">Your Link</Link>
Abbos Tajimov
źródło
1
Działa z 3.0.0, dzięki
A7DC
14

W przypadku łącza zewnętrznego po prostu użyj achor zamiast Link: 

<a rel="noopener noreferrer" href="http://url.com" target="_blank">Link Here</a>
Anthony Agbator
źródło
1
Powód tego rel="noopener noreferrer"można znaleźć tutaj mathiasbynens.github.io/rel-noopener
Liron Lavi
6

W moim przypadku używam innej funkcji.

Funkcjonować

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

  <Link onClick={openTab}></Link>
Ankit Kumar Rajpoot
źródło
4

Prostym sposobem jest użycie właściwości „to”:

<Link to="chart" target="_blank" to="http://link2external.page.com" >Test</Link>
Bob Slave
źródło
2

to działa dobrze dla mnie

<Link to={`link`} target="_blank">View</Link>
Ashad Nasim
źródło
1

Aby otworzyć adres URL w nowej karcie, możesz użyć tagu Link, jak poniżej:

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

Dobrze jest pamiętać, że <Link>element jest tłumaczony na <a>element, a zgodnie z dokumentami react-router-dom możesz przekazać dowolne właściwości, które chcesz, aby były na nim, takie jak tytuł, identyfikator, nazwa klasy itp.

MMalke
źródło
0

target = "_ blank" wystarczy, aby otworzyć nową kartę, gdy używasz React-router

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

Shrutika Shrutika
źródło