React 不呈现 NavLink 但在控制台中打印项目答案

【问题标题】：React does not render NavLink but prints items in consoleReact 不呈现 NavLink 但在控制台中打印项目
【发布时间】：2023-01-21 12:32:04
【问题描述】：

整个应用程序包含在 BrowserRouter 中，我的 Navlink 位于边栏中。我想以动态方式呈现它们，但出于某种原因，NavLink 未呈现。我已经尝试在控制台中打印它们只是为了查看我的代码是否已到达并且它确实存在但未呈现。

编辑：我尝试渲染其他标签，但没有一个正在渲染。只有 console.log 在工作。

 const Sidebar = ({ user, closeToggle }) => {
  const categories = [
    { name: "Animals" },
    { name: "wallpapers" },
    { name: "Photography" },
    { name: "Gaming" },
    { name: "Coding" },
  ];
  return (
    <div className="flex flex-col justify-between bg-white h-full overflow-y-scrikk min-w-210 hide-scrollbar">
      <div className="flex flex-col">
      
        <div className="flex flex-col gap-5">
         
          <h3 className="capitalize mt-2 px-5 text-base 2xl:text-xl">
            discover categories
          </h3>
          {categories &&
            categories.slice(0, categories.length - 1).map((item,id) => {
              console.log(item.name);
              <NavLink
                to={`/category/${item.name}`}
                className={({ isActive }) =>
                  isActive ? isActiveStyle : isNotActiveStyle
                }
                onClick={handleCloseSidebar}
                key={id}
              >
                console.log(item.name);
                <h3>{item.name}</h3>
              
              </NavLink>;
            })}
        </div>
      </div>
    </div>
  );
};

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

你需要返回如果您使用带有函数体的箭头函数，则来自映射回调的 JSX，即 () => { ... }。

{categories &&
  categories.slice(0, categories.length - 1).map((item, id) => {
    console.log(item.name);
    return (
      <NavLink
        to={`/category/${item.name}`}
        className={({ isActive }) =>
          isActive ? isActiveStyle : isNotActiveStyle
        }
        onClick={handleCloseSidebar}
        key={id}
      >
        <h3>{item.name}</h3>
      </NavLink>
    );
  })
}

没有主体的箭头函数有一个隐式返回。

{categories &&
  categories.slice(0, categories.length - 1).map((item, id) => (
    <NavLink
      to={`/category/${item.name}`}
      className={({ isActive }) =>
        isActive ? isActiveStyle : isNotActiveStyle
      }
      onClick={handleCloseSidebar}
      key={id}
    >
      <h3>{item.name}</h3>
    </NavLink>
  ))
}

【讨论】：