实现导航栏链接条件渲染答案

【问题标题】：Materialize navbar links conditional rendering实现导航栏链接条件渲染
【发布时间】：2020-10-01 19:49:10
【问题描述】：

我正在使用 React Materialize 和 React Router Dom。我正在尝试仅向经过身份验证的用户显示导航链接，因此我正在使用条件渲染。但如果我像下面那样做，导航链接会呈现为垂直的，而不是像往常一样水平的。有解决方案吗？谢谢

    <Navbar>
      {isAuthenticated && (
      <>
      <NavLink to="/locations" href="/locations">
        Locations
      </NavLink>
      <NavLink to="/categories" href="/categories">
        Categories
      </NavLink>
      </>
      )}
    </Navbar>

【问题讨论】：

标签： css reactjs navbar materialize

【解决方案1】：

看起来Navbar 组件在li 元素中呈现其所有子元素。当您将它们包装在一个片段中时，组件会将其视为其唯一的子元素，并将所有 NavLink 元素放在一个 li 中。

我可以想到两种简单的方法来处理这个问题：

如果只有几个链接，可以为它们做条件渲染：

<Navbar>
 {isAuthenticated && (<NavLink to="/locations" href="/locations">Locations</NavLink>)}
 {isAuthenticated && (<NavLink to="/categories" href="/categories">Categories</NavLink>)}
</Navbar>

但是，这种解决方案并不可靠，尤其是在您有很多链接的情况下。

将NavLink 元素存储在某个数组中，并有条件地添加与身份验证相关的项：

// In the component:
const links = [/* some public links */];
const privateLinks = [
    // Don't forget keys. The numbers here are only for example.
    <NavLink key={1} to="/locations" href="/locations">Locations</NavLink>,
    <NavLink key={2} to="/categories" href="/categories">Categories</NavLink>
];

if(isAuthenticated){
 links.push(...privateLinks);
}

// In the template:
<Navbar>{links}</Navbar>

链接数组的逻辑非常简单（将私有链接设置为最后一项）只是为了让演示更简单。

【讨论】：

我尝试了 2. 解决方案，效果很好，非常感谢。 :)