反应路由器链接到新标签

Posted 2023-02-21

【中文标题】反应路由器链接到新标签

【英文标题】：React Router Link to New Tab

【发布时间】：2020-05-07 19:47:54

【问题描述】：

我正在尝试使用 React Router 在新选项卡中呈现新组件。它有一个正在传递的参数。

以下是对我有用的示例在同一个选项卡中使用一个参数。如果我将 target="_blank" 添加到以下链接，我会收到 404 错误。

index.js 中的路由：

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

主菜单页面中的链接：

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

我需要更改哪些内容才能在新选项卡中使用参数打开此组件？谢谢！

编辑：我的 URL 显示为 /a-graph/anId 这是一个数字。如果我的路线和链接是正确的，我不知道如何获得 404。感谢您的关注！

【参考方案1】：

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

在这里找到：https://github.com/ReactTraining/react-router/issues/2188#issuecomment-146366561

在 1.0 中这是受支持的。我们只是将您提供给<Link>through 的所有额外道具传递给<a> 元素。因此，<Link ... target="_blank"> 将按您的预期工作。

【讨论】：

target="_blank" 如果我​​没有参数，则对我有用，但当我有参数时，我会得到 404。

“参数”是什么意思？

在我的示例中，我指的是路径中的 anId 值。正如我所看到的，这是我传递给新选项卡的 ID 值。 @TKoL

你有渲染链接时的id吗？ <Link to=`/a-graph/$anId`

是的，我在呈现链接时确实有 ID。它由用户使用包含链接的页面登录然后呈现。非常感谢您的回复！ @TKoL