我正在使用条件渲染来根据URL或用户是否已登录,在我的React标题中呈现不同的元素。在默认情况下,我想要并排呈现两个按钮,但只有第二个按钮出现了。我该如何解决这个问题?
const NavHeader = () => {
const { location } = useSelector(state => state.router);
const { authenticated } = useSelector(state => state.signIn);
const menuItem = (linkPath, text, type) => (
<Item className="header-item">
<Button type="primary" ghost={type}>
<Link to={linkPath}>
{text}
</Link>
</Button>
</Item>
);
const renderMenuItem = ({ pathname }) => {
if (pathname === '/signup') {
return menuItem('/signin', SIGNIN, false);
}
if (pathname === '/signin') {
return menuItem('/signup', SIGNUP, true);
}
if (authenticated) {
return menuItem('/dashboard', GO_TO_DASHBOARD, false);
}
return (
menuItem('/signin', SIGNIN, false)
&& menuItem('/signup', SIGNUP, true)
);
};
return (
<Header>
<Link to="/" className="left-menu">
<img src={Logo} height="60px" alt="NeoNatar Logo" />
</Link>
<Menu className="right-nav" mode="horizontal">
{renderMenuItem(location)}
</Menu>
</Header>
);
};