最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React Router Link to New Tab - Stack Overflow

programmeradmin0浏览0评论

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 0
Add a ment  | 

1 Answer 1

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.

发布评论

评论列表(0)

  1. 暂无评论