CODEWITHSUNDEEP
javascriptreactjsreact-router
Bou
Bou

Reputation: 21

React Router Link to New Tab

I am attempting to render a new component in a new tab using React Router. It has one parameter that is being passed.

Below is an example of what works for me in the same tab with one parameter. If I add target="_blank" to the below link, I get a 404 error.

Routing in index.js: 

<Route exact path="/a-graph/:anId" component={aGraph} />

Link in main menu page:

<Link to={"/a-graph/anId"} style={{ overflowX: "visible", color: "black" }}>
    <MenuItem fitted key="graph" text="A Graph"/>
</Link>

What do I need to change so that I can open this component with a parameter in a new tab? Thanks!

Edit: my URL is displayed as /a-graph/anId which is a number. If my route and link are correct, I don't see how I'd get a 404. Thanks for looking!

Upvotes: 2

Views: 14735

Answers (1)

TKoL
TKoL

Reputation: 13902

<Link target="_blank" to={"/a-graph/anId"} style={{ overflowX: "visible", color: "black" }}>
    <MenuItem fitted key="graph" text="A Graph"/>
</Link>

As found here: https://github.com/ReactTraining/react-router/issues/2188#issuecomment-146366561

In 1.0 this is supported. We just pass all extra props you give your <Link>through to the <a> element. So, <Link ... target="_blank"> will work as you'd expect.

Upvotes: 5

Related Questions