<Link> 替换不起作用答案

【问题标题】：<Link> Replace not working<Link> 替换不起作用
【发布时间】：2018-03-15 04:59:26
【问题描述】：

我正在使用 React 开发一个完整的站点。我正在使用<HashRouter> 来呈现我的应用程序。在整个站点中，您会看到一个导航菜单，该菜单使用<Link>s 将您带到不同的页面。

我网站中的一个页面是一家商店，其 URL 是 /Shop。

当您点击商店中的产品时，它使用<Link> 将产品名称附加到当前 URL 的末尾 - /Shop/Product - 并呈现相应的信息。

如果您正在查看产品并尝试导航到不同的页面，它只会替换最后一个条目，即使是replace={true}。因此，如果我当前位于 /Shop/Product 并尝试导航到 /Contact，则 URL 将更改为 /Shop/Contact。

我是否误解了 replace 应该如何工作？还是我做错了什么？任何帮助将不胜感激。

【问题讨论】：

React Router 的 <Link> 有 'to' 属性，你用它来导航吗？因为这需要一个绝对路径而不是相对路径，所以它应该替换整个 URL。您能否添加一些显示路由器和链接的代码？

【解决方案1】：

如果你使用这样的东西：

<Link to="Contact" />

它只会改变 URL 的最后一段，因为它是一个相对路径，所以如果你在 /Shop/Something 它会变成 /Shop/Contact

您可能想改用绝对路径：

<Link to="/Contact" />

替换与推送路线是另一回事。如果您将路线历史视为一个数组：

[
  '/Shop/Item',
  '/Shop/Item2'
]

push 将追加到列表中，replace 将替换最后一个索引

【讨论】：