【问题标题】:React Router Link to New Tab反应路由器链接到新标签
【发布时间】:2023-03-08 12:15:02
【问题描述】:

我正在尝试使用 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。感谢您的关注!

【问题讨论】:

    标签: javascript reactjs react-router


    【解决方案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 中这是受支持的。我们只是将您提供给&lt;Link&gt;through 的所有额外道具传递给&lt;a&gt; 元素。因此,&lt;Link ... target="_blank"&gt; 将按您的预期工作。

    【讨论】:

    • target="_blank" 如果我​​没有参数,则对我有用,但当我有参数时,我会得到 404。
    • “参数”是什么意思?
    • 在我的示例中,我指的是路径中的 anId 值。正如我所看到的,这是我传递给新选项卡的 ID 值。 @TKoL
    • 你有渲染链接时的id吗? &lt;Link to={`/a-graph/${anId}`}
    • 是的,我在呈现链接时确实有 ID。它由用户使用包含链接的页面登录然后呈现。非常感谢您的回复! @TKoL
    猜你喜欢
    • 2018-01-18
    • 2020-10-20
    • 2018-02-16
    • 1970-01-01
    • 2020-07-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-16
    相关资源
    最近更新 更多