如何在ReactJS中阻止在URL中添加字符串？

Question

我创建了一个动态菜单，公众和注册用户都可以访问。问题是我有这个：

{pages.length > 0 ? (
  pages.map(page => (
    <li key={page._id} className="nav-item">
      {page._id ? (
        <Link to={`pages/${page._id}`} className="nav-link">{page.title}</Link>
      ) : (
          <Link to={`pages/${page._id}`} className="nav-link">Hola 2</Link>
        )}
    </li>
  ))
) : (
    <li className="nav-item">
      <a className="nav-link" href="#!">No Pages Found</a>
    </li>
  )}

现在，当我在主页上点击一个URL时，这些链接工作得很好：

localhost:3000/pages/5d2ea3a1ef0ba93f9cd1b980

一旦我进入一个URL，我尝试点击一个不同的链接，突然它的行为就像这样：

localhost:3000/pages/pages/5d2ea3a1ef0ba93f9cd1b980

以此类推：

localhost:3000/pages/pages/pages/5d2ea3a1ef0ba93f9cd1b980

有谁知道为什么会发生这种事吗？

Answer 1

使用to={/pages/${page._id}}而不是to={pages/${page._id}}。如果链接不是以/开头，它将被视为与当前url相关。