Question

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

display: inline-block

现在，当我进入主页并单击一个URL时，链接将非常有用：

{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

以此类推：

localhost:3000/pages/pages/5d2ea3a1ef0ba93f9cd1b980

有人知道为什么会这样吗？

Answer 1

使用to={/pages/${page._id}}代替to={pages/${page._id}}。如果链接不是以/开头，则将其视为相对于当前URL的链接。

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

1 个答案: