React-Router відкрийте посилання в новій вкладці

85

Чи є спосіб змусити React Router відкрити посилання в новій вкладці? Я спробував це, і це не спрацювало.

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

Це можна розпушити, додавши щось подібне onClick="foo"до Посилання, як те, що я маю вище, але там буде помилка консолі.

Дякую.

reactjs react-router

— mcd
джерело

36

Я думаю, що компонент 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>

— користувач1369825
джерело

тут він викликає функцію самовиклику href, це призведе до повторного відтворення ALERT!

— Анупам Маурія,

74

У React Router версії 5.0.1 і вище ви можете використовувати:

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

— hydRAnger
джерело

47

яка поточна версія React Router;)

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

1

@AbhishekNalin Як отримати this.makeHref та надіслати параметр в сторону this.makeHref

— DDD

15

У React-router 5.0.1, здається, додавання target="_blank"достатньо, щоб зробити трюк.

— mscrivo

5

Зверніть увагу на цей коментар. Використовуйте, rel='noopener noreferrer'якщо використовуєтеtarget="_blank"

— Гаспар

Дякую! target="_blank"працював у мене :) в

— React

33

Ми можемо використовувати такі варіанти: -

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

Ми можемо використовувати будь-який із трьох варіантів, щоб відкрити нову вкладку шляхом маршрутизації реакцій.

— Горах-Натх
джерело

деякі iPhone ігнорують "target = '_ blank'". Здається, для цих телефонів це все одно не вдасться.

— Дебора

3

Примітка щодо target='_blank': рекомендуємо додати rel='noopener noreferrer'до свого <a>тегу

— Blundering Philosopher

16

Ви можете використовувати "{}" для цілі, тоді jsx не буде плакати

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

— Аббос Таджимов
джерело

Працює з 3.0.0, дякую

— A7DC

14

Для зовнішнього посилання просто використовуйте прив'язку замість Посилання:

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

— Ашад Насім
джерело

1

Щоб відкрити URL-адресу в новій вкладці, ви можете використовувати тег Посилання, як показано нижче:

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

Приємно пам’ятати, що <Link>елемент перекладається на <a>елемент, і, згідно з документами response-router-dom , ви можете передавати будь-який реквізит, який би хотів бути на ньому, наприклад title, id, className тощо.

— М.Мальке
джерело

0

target = "_ blank" достатньо для відкриття в новій вкладці, коли ви використовуєте реакційний маршрутизатор

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

— Шрутика Шрутика
джерело