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

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

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

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

Спасибо.

Ответы

Ответ 1

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

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

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

Ответ 2

В текущей версии React Router вы можете использовать:

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

Ответ 3

Мы можем использовать следующие опции: -

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

Мы можем использовать любой из трех вариантов для открытия в новой вкладке с помощью реакции маршрутизации.

Ответ 4

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

Ответ 5

Для внешней ссылки просто используйте ачор вместо ссылки:

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

Ответ 6

Простым способом является использование свойства 'to':

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

Ответ 7

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

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

Ответ 8

это хорошо работает для меня

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