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

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

但是，我试图在“提交”之后立即制作该部分＆＃39;切换，即account/submissions/items account/submissions/maps。

我做错了什么？

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

Answer 1

我搜索了您的问题，我找到了这个有用的包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

提供的链接组件

Answer 2

如果您将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 3

首先，让我们强调相对链接的概念。这是一个链接，可以为您带来取决于您所在的位置。

意思是，如果您在不同位置（网址）中使用相同相对链接，结果会有所不同。直接暗示如果你想要一个相对链接的只有一个给定的行为，你就不能在几个地方使用它。

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

你能做什么：如前所述，您可以使用currentPath道具，在您链接的页面here中建议道具。结果将是：

<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 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> P.S：我只是指出了我的方法和解决方案。我不确定是否会引起其他问题。

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

4 个答案: