Css 具体化导航栏链接条件渲染

我正在使用React-Materialize和React-Router-Dom。我试图只向经过身份验证的用户显示导航链接，所以我使用条件呈现。但如果我像下面这样做，导航链接是垂直渲染的，而不是像往常一样水平渲染的。有解决办法吗？谢谢

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

{已验证&&(
位置
类别
)}

看起来

Navbar

组件正在渲染

li

元素中的所有子元素。当您将它们包装在片段中时，组件将其视为唯一的子元素，并将所有

NavLink

元素放在单个

li

中

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

如果只有几个链接，则可以对它们执行条件渲染：

//在模板中：
{links}

---

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

我尝试了2。解决方案，效果很好，非常感谢。：）

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

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