React-Router open Link in new tab

97

Is there a way to get React Router to open a link in new tab? I tried this and it did not work.

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

It's possible to fluff it by adding something like onClick="foo" to the Link like what I have above, but there would be a console error.

Thanks.

This question is tagged with reactjs react-router

~ Asked on 2015-05-12 22:50:25

The Best Answer is


41

I think Link component does not have the props for it.

You can have alternative way by create a tag and use the makeHref method of Navigation mixin to create your url

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

~ Answered on 2015-05-29 03:16:31


91

In React Router version 5.0.1 and above, you can use:

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

~ Answered on 2015-10-15 03:44:05


Most Viewed Questions: