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
Лирон Лави
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>

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