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

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

13

Począwszy odreak_router 1.0, właściwości zostaną przekazane do znacznika kotwicy. Możesz bezpośrednio użyć target="_blank". Omówiono tutaj: https://github.com/ReactTraining/react-router/issues/2188

— zręczny
źródło

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