React导航栏点击跳转异常：链接显示[object Object]无法定位区块

1. 核心错误原因 #

导航跳转失效并出现异常URL的问题，源于两个语法错误：

• 模板字符串未正确使用反引号：所有href={"#${item}"}中的双引号无法解析变量${item}，导致href被解析为字面量#${item}，URL编码后显示为%24%7Bitem%7D。
• React key使用了对象：移动端菜单的li标签key={{ item }}会创建一个对象{item: "about"}，React将对象转为字符串[object Object]，这就是地址栏出现%5Bobject%20Object%5D的原因。

2. 修复后的完整代码 #

import React, { useState } from "react";
import { HiMenuAlt4, HiX } from "react-icons/hi";
import { motion } from "framer-motion";
import { images } from "../../constants";
import "./Navbar.scss";

const Navbar = () => {
  const [toggle, setToggle] = useState(false);

  // 平滑滚动处理函数
  const handleSmoothScroll = (e, targetId) => {
    e.preventDefault();
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: "smooth" });
    }
    setToggle(false); // 移动端点击后自动关闭菜单
  };

  return (
    <nav className="app__navbar">
      <div className="app__navbar-logo">
        <img src={images.logo} alt="logo" />
      </div>
      <ul className="app__navbar-links">
        {["home", "about", "work", "skills", "testimonials", "contact"].map(
          (item) => (
            <li className="app__flex p-text" key={`link-${item}`}>
              <div />
              <a href={`#${item}`} onClick={(e) => handleSmoothScroll(e, item)}>
                {item}
              </a>
            </li>
          )
        )}
      </ul>
      <div className="app__navbar-menu">
        <HiMenuAlt4 onClick={() => setToggle(true)} />
        {toggle && (
          <motion.div
            whileInView={{ x: [300, 0] }}
            transition={{ duration: 0.85, ease: "easeOut" }}
          >
            <HiX onClick={() => setToggle(false)} />
            <ul>
              {["home", "about", "work", "skills", "testimonials", "contact"].map(
                (item) => (
                  <li key={`mobile-link-${item}`}>
                    <a
                      href={`#${item}`}
                      onClick={(e) => handleSmoothScroll(e, item)}
                    >
                      {item}
                    </a>
                  </li>
                )
              )}
            </ul>
          </motion.div>
        )}
      </div>
    </nav>
  );
};

export default Navbar;

3. 关键修复点说明 #

• 模板字符串修正：将所有"#${item}"替换为#${item}，确保变量item被正确解析为#home、#about等目标锚点。
• React key修正：把桌面端的key={"link-#${item}"}改为key={link-${item}}，移动端的key={{ item }}改为key={mobile-link-${item}}，保证key是唯一的字符串，避免对象转义问题。
• 平滑滚动实现：新增handleSmoothScroll函数，通过scrollIntoView({ behavior: "smooth" })实现平滑滚动，同时阻止a标签的默认跳转行为，移动端点击后自动关闭菜单。

额外注意事项 #

确保页面中对应区块的id与导航项完全匹配，比如关于区块的标签要写<section id="about">...</section>，否则无法定位到目标位置。

内容的提问来源于stack exchange，提问作者Ghaith Nakchabandi