React-Router открыть ссылку в новой вкладке

89

Есть ли способ заставить React Router открывать ссылку в новой вкладке? Я попробовал это, но не вышло.

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

Можно взбить его, добавив что-то вроде onClick="foo"ссылки, как у меня выше, но это приведет к ошибке консоли.

Благодарю.

reactjs react-router

— mcd
источник

41

Я думаю, что у компонента Link нет реквизита для этого.

У вас может быть альтернативный способ, создав тег и используя метод makeHref миксина навигации для создания вашего URL-адреса.

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

— user1369825
источник

здесь он вызывает функцию самовызова href, это вызовет повторную визуализацию ALERT!

— Анупам Маурья

Я считаю, что функция makeHref была переименована в createHref и с тех пор удалена. stackoverflow.com/a/35066996/6004931 github.com/ReactTraining/history/issues/365

— Ник Грэм

82

В React Router версии 5.0.1 и выше вы можете использовать:

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

— гидранжер
источник

47

какая сейчас версия React Router;)

— Абхишек Налин

1

@AbhishekNalin How to get this.makeHref and send parameter in side this.makeHref

— Dharmesh

15

In react-router 5.0.1, it seems adding target="_blank" is enough to do the trick.

— mscrivo

7

Note this comment. Use rel='noopener noreferrer' if you use target="_blank"

— Gaspar

Thank you! target="_blank" worked for me :) in react-router 5.0.1

— Rachit Magon

34

We can use the following options:-

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

We can use either of three option to open in new tab by react routing.

— Gorakh Nath
источник

some iPhones ignore "target='_blank'". It seems like this would still fail for those phones.

— Deborah

3

Note about target='_blank': recommend adding rel='noopener noreferrer' to your <a> tag

— Blundering Philosopher

19

You can use "{}" for the target, then jsx will not cry

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

— Abbos Tajimov
источник

15

For external link simply use an achor in place of Link:

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

— Энтони Агбатор
источник

1

Причину этого rel="noopener noreferrer"можно найти здесь mathiasbynens.github.io/rel-noopener

— Лирон Лави

13

Начиная с response_router 1.0, свойства будут передаваться в тег привязки. Вы можете напрямую использовать target="_blank". Обсуждается здесь: https://github.com/ReactTraining/react-router/issues/2188

— декстер
источник

6

В моем случае я использую другую функцию.

Функция

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

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

— Анкит Кумар Раджпут
источник

4

Самый простой способ - использовать свойство to:

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

— Боб Раб
источник

2

это отлично работает для меня

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

— Ашад Насим
источник

2

Чтобы открыть URL-адрес в новой вкладке, вы можете использовать тег Link, как показано ниже:

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

Приятно иметь в виду, что <Link>элемент переводится в <a>элемент, и в соответствии с документами response-router-dom вы можете передавать любые реквизиты, которые вы хотите использовать, такие как title, id, className и т. Д.

— MMalke
источник

0

target = "_ blank" достаточно, чтобы открыть в новой вкладке, когда вы используете response-router

например: <Link to={/admin/posts/error-post-list/${this.props.errorDate}} target="_blank"> View Details </Link>

— Шрутика Шрутика
источник