反应路由器链接错误的网址答案

【问题标题】：React router Link wrong url反应路由器链接错误的网址
【发布时间】：2017-01-12 10:45:05
【问题描述】：

我正在使用带有 Link 的 React 路由器来更改 url 并在应用程序中导航。在阅读列表中，我使用以下代码将用户导航到阅读编辑：

 <Link to={`readings/edit/${reading.id}`} params={{id: reading.id}}>

我已经定义了以下路线：

<Route path="/" component={App}>
        <IndexRoute component={Greetings}/>
        ...
        <Route path="readings/edit/:id" component={requireAuth(ReadingEdit)}/>
        <Route path="readings/:tab" component={requireAuth(ReadingListContainer)}/>
        ...
    </Route>

导航正常工作，但 URL 错误，应该是 http://localhost:8000/readings/edit/5，但它是 http://localhost:8000/readings/readings/edit/5。这意味着当我刷新站点时，路由器找不到路径。

我该如何解决这个问题？

【问题讨论】：

您是否尝试在 Link 标签中的读数前添加 /？
天哪，这就是解决方案。非常感谢，我花了大约 2 个小时才弄清楚这个问题……但是为什么 Link 会这样做？？？
Link 可能使用 / 作为根路径并将其余部分添加到根路径。如果您不使用 / ，它将使用浏览器中的当前 URL 作为 root。所以我的猜测是您路由的 URL 是“localhost:8000/readings”
另外，请将我的答案标记为当前答案。否则您的帖子将保持未解决状态。

标签： javascript reactjs url react-router

【解决方案1】：

正如评论中所讨论的，在链接标签中的读数之前添加 / 将解决此问题。

【讨论】：