React路由器链接URL错误

Question

我正在使用React Router和Link来更改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。这意味着当我刷新网站时，路由器找不到路径。

如何解决这个问题？

- alphiii

---

你是否尝试在链接标签中的“readings”前添加“/”？ - Tahnik Mustasin

哦，伙计，那就是解决方案。非常感谢，我花了大约两个小时才想出来...但是为什么Link会这样做呢？ - alphiii

链接可能使用/作为根路径，并将其余部分添加到根路径中。如果您不使用/，则会将当前浏览器中的URL用作根路径。所以我猜您正在从以下URL进行路由："http://localhost:8000/readings/" - Tahnik Mustasin

并且，请将我的答案标记为当前答案。否则，你的帖子将保持为未解决状态。 - Tahnik Mustasin

Answer 1

如评论中所讨论的，将链接标签中的阅读内容前加上 / 将会解决这个问题。

- Tahnik Mustasin