如何使用导航链接

Question

我使用 Navlink 导航新路径，例如： 当我点击“/news”时，我的路径是“/home”link 我的路径更改为“/home/news” 我想要这条路“/新闻/ 我使用 Navlink "react-router-dom"

 <NavLink
                  key={getKeyEleman()}
                  className="navMenuItem"
                  style={{ color: item.color || "var(--warmGrey)" }}
                  onClick={() => setOpenNavMenu(false)}
                  to={item.route}
                >

Answer 1

如果您单击 link 并将 item.route 附加到当前路径，那么听起来您正在使用 relative 路由而不是绝对路由路由。确保您的 link 目标路径具有前导 "/" 字符。

to={`/${item.route}`}

或者修复您正在映射的数据，使其具有绝对路径。

items = [
  {
    ...
    route: "/home",
    ...
  },
  {
    ...
    route: "/news",
    ...
  },
  ...
];