反应路由器相对链接未正确链接

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/itemsaccount/submissions/maps。

我做错了什么？

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

Answer 1

首先，让我们强调相对链接的概念。 这是一个链接，可将您带到取决于您已经在哪里。

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

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

你能做什么： 如前所述，您可以使用链接here 的页面中建议的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

我已经搜索了你的问题，我找到了这个有用的包react-router-relative-links

要在终端中安装它：

npm install react-router-relative-links react-router-apply-middleware

然后在您的路由文件中，您将像这样应用中间件：

import { Router, Route, browserHistory } from 'react-router';
import applyMiddlewareRouter from 'react-router-apply-middleware'
import { useRelativeLinks } from 'react-router-relative-links'


<Router history={browserHistory} render={applyMiddlewareRouter(useRelativeLinks())}>
  <Route path="submissions" component={SubmissionPage}>
    <Route path="items" component={ItemSubmissions}></Route>
    <Route path="maps" component={MapSubmissions}></Route>
  </Route>
</Router>

那么任何时候你需要添加一个导航链接，你可以像这样添加它： 我们假设当前路径是localhost:8080/account/submissions

<RelativeLink to='./items'>test</RelativeLink> # to localhost:8080/account/submissions/items
<RelativeLink to='./maps'>test</RelativeLink> # to localhost:8080/account/submissions/maps

，不过最好使用react-router提供的Link组件

Answer 3

如果您将currentPath 道具传递给您的链接，它将开始工作。否则，如果您不定义当前路径。它落到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 有点错误。 就个人而言，我不建议您在生产中使用。

Answer 4

除此之外，我找不到任何其他方法。不幸的是，react-router 不支持相对路径，但解决方法是使用 Switch，然后在适合您使用的情况下在组件中生成绝对路径。在导入 Switch 方法之前，您必须将您的 react-router 更新到 4+。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

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

但如果我像你一样只使用两条路径，最终分别是 /accounts/submissions/items 和 /maps，我可能会坚持使用 <Route path="/accounts/submissions/items" component={MapSubmissions} />

P.S：我只是指出我的方法和解决方案。我不确定它是否会导致其他问题。