物化导航栏链接条件渲染

Question

我正在使用React Materialize和React Router Dom。我正在尝试仅向经过身份验证的用户显示导航链接，所以我正在使用条件渲染。但是，如果我像下面那样进行操作，则导航链接将呈现为垂直状态，而不是通常的水平显示。有解决方案吗？谢谢

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

Answer 1

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

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

1. 如果只有几个链接，则可以对其进行条件渲染：

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

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

1. 将NavLink元素存储在某个数组中，并有条件地添加auth依赖项：

// 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>

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