时间戳

首页 > 解决方案 > React - 链接并不总是按预期工作

reactjs - React - 链接并不总是按预期工作

问题描述

我正在构建一个在前端使用 React 的 Pinterest 克隆。

主页是/pins，它只是所有引脚的索引。在 Pin Index Item 组件中，当用户单击 pin 时，我正在使用 Link 转到正确的路径。

这是 PinIndexItem.jsx 中的链接

<Link to={`users/${pin.author_id}/boards/${pin.board_id}/pins/${pin.id}`}>

这是我的 App.jsx 中的路线

<Switch>
 <ProtectedRoute exact path='/users/:userId/boards/:boardId/pins/:pinId' component={PinShowContainer} />
</Switch>

当我从别针路线出发时，这是

#/pins/

它工作得很好

但是，我在用户的针板上，即

users/${pin.author_id}/boards/${pin.board_id}/

而不是去

users/${pin.author_id}/boards/${pin.board_id}/pins/${pin.id}

，它添加到路径中：

users/${pin.author_id}/boards/用户/${pin.author_id}/boards/${pin.board_id}/pins/${pin.id}`

我很困惑为什么在第二种情况下它的工作方式不同。谢谢你。

我应该history.push在这两种情况下都使用吗？

标签： reactjsreact-router

解决方案

/在链接元素上，如果您省略href属性的首字母（链接的目标 URL），则href属性值将附加到当前 URL。这是一个相对于当前页面的链接（href值将附加到当前页面的完整 URL）。

例如，如果当前页面 URL 是/here并且您设置了一个链接href="there"，那么单击该链接将让您访问/here/there。

如果要设置指向绝对路径的链接，则需要/在href属性上添加首字母。在我之前的示例中，如果当前页面 URL 是/here并且您使用 设置了一个链接href="/there"，那么单击该链接将让您访问/there.

您应该能够通过切换到绝对路径或使用不同的相对路径来解决您的问题。

有关完整文档，请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a。

推荐阅读