反应路由器相对链接没有正确链接

Question

所以我使用的是npm软件包react-router-relative(https://www.npmjs.com/package/react-router-relative),但它似乎没有正确切换url.

这是我的链接的样子:

<Link to='items' className="btn btn-default submission-button">Items</Link>
<Link to='maps' className="btn btn-default submission-button">Maps</Link>

这是我的路线:

<Route path="submissions" component={SubmissionPage}>
    <Route path="items" component={ItemSubmissions}></Route>
    <Route path="maps" component={MapSubmissions}></Route>
</Route>

发生的事情是我第一次点击链接它会正确链接,即

http://localhost:3000/#/account/submissions/items

但当我再次点击它时,它会去:

http://localhost:3000/#/account/submissions/items/items

此时,结束部分将切换而不是追加,但会抛出错误.

但是,我试图在"提交"切换后立即制作该部件,即account/submissions/items account/submissions/maps.

我究竟做错了什么？

我尝试过这种非相对链接变体,即{this.props.location.pathname + '/items'}它只是做同样的事情.

Answer 1

首先，让我们强调一下相对链接的概念。这是一个链接，可以根据您所在的位置将您带到某个地方。

意思是，如果您在不同的地方（URL）使用相同的相对链接，结果会有所不同。直接的含义是，如果您只想要一个相对链接的给定行为，则不能在多个地方使用它。

在您的情况下，不同的 URL 会出现相同的相对链接，从而导致不同的结果。

你能做些什么：正如前面所指出的，你可以使用currentPath道具，在你链接的页面上提示这里。结果将是这样的：

<Link to='items' currentPath='/submissions'>Items</Link>
<Link to='maps' currentPath='/submissions'>Maps</Link>

这看起来像一个伪装的绝对路径：

<Link to='/submissions/items'>Items</Link>
<Link to='/submissions/maps'>Maps</Link>

相对路径的解决方案是：

<Link to='../items'>Items</Link>
<Link to='../maps'>Maps</Link>

但请记住，这些链接是相对的，应该只显示在一个地方，在你的情况下 #/submissions/somewhere

如果您想要一个无论当前位置如何都可以将您带到同一页面的链接，您应该使用绝对链接。

到目前为止，我还没有想出很多相对链接的用途。返回：<Link to="..">Go back</Link> 或者可能是常见的操作：<Link to="./edit">Edit</Link>

总而言之，我会说当只预期一种行为时，不需要相对链接。一种行为意味着一条路线，如果您知道路线，您不妨使用绝对链接。仅当您期望不同的行为时才应使用相对链接。

Answer 2

如果您将currentPathprops 传递给链接，它将开始工作。否则，如果您没有定义当前路径。它落入了window.location.hash不好的境地。

<Link to='/items' currentPath='/submissions' className="btn btn-default submission-button">Items</Link>
<Link to='/maps' currentPath='/submissions' className="btn btn-default submission-button">Maps</Link>

我相信npm包react-router-relative有点 bug。就我个人而言，我不建议您在生产中使用。