React-ルーターは新しいタブでリンクを開きます

ReactRouterに新しいタブでリンクを開かせる方法はありますか？私はこれを試しましたが、うまくいきませんでした。

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

次のようなものを追加することでそれを綿毛にすることが可能です onClick="foo"にリンクに次のようなものをことは可能ですが、コンソールエラーが発生します。

ありがとう。

リンクコンポーネントにはそのための小道具がないと思います。

タグを作成し、ナビゲーションミックスインのmakeHrefメソッドを使用してURLを作成することで、別の方法を使用できます。

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

React Routerバージョン5.0.1以降では、以下を使用できます。

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

次のオプションを使用できます。-

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

3つのオプションのいずれかを使用して、reactルーティングによって新しいタブで開くことができます。

ターゲットに「{}」を使用すると、jsxは泣きません

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

外部リンクの場合は、リンクの代わりにachorを使用するだけです。

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

react_router 1.0以降、小道具はアンカータグに渡されます。直接使用できますtarget="_blank"。ここで説明：https：//github.com/ReactTraining/react-router/issues/2188

私の場合、別の関数を使用しています。

関数

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

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

簡単な方法は、 'to'プロパティを使用することです。

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

これは私にとってはうまくいきます

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

新しいタブでURLを開くには、次のようにLinkタグを使用できます。

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

それの素敵なことを心に留めておくべき<Link>要素がに翻訳さ<a>要素、およびごとのように、ドキュメント・ルータ-DOMを反応させ、あなたがなどのタイトル、ID、クラス名、あなたがそれになりたいすべての小道具を渡すことができます

react-routerを使用している場合、target = "_blank"は新しいタブで開くのに十分です

例：<Link to={/ admin / posts / error-post-list / $ {this.props.errorDate}} target="_blank"> View Details </Link>