I am attempting to render a new ponent 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" ponent={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 ponent 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!
I am attempting to render a new ponent 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" ponent={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 ponent 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!
Share Improve this question edited Jan 21, 2020 at 18:24 Bou asked Jan 21, 2020 at 17:29 BouBou 211 gold badge1 silver badge3 bronze badges 01 Answer
Reset to default 5<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./ReactTraining/react-router/issues/2188#issuement-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.