Javascript 如何使用三元运算符使用react返回jsx？

如果用户在“/items”页面中，我想隐藏一个组件

下面是我的代码

function Main() {
    const isAdmin = getUser();

    return(
        <Switch>
            <Route
                exact
                path="/items"
                render={routeProps => (
                    <Layout>
                        {isAdmin ? <Items {...routeProps} />: <NotFound/>}
                    </Layout>
               )}
            />
            //other Routes
        </Switch>
    );
}


const Layout: React.FC = ({ children }) => (
    <>
        <TopBar />
            {children}
        <BottomBar />
    </>
);

函数Main（）{
const isAdmin=getUser（）；
返回(
(
{isAdmin？：}
)}
/>
//其他路线
);
}
常量布局：React.FC=（{children}）=>(
{儿童}
);

现在，当用户处于/items页面时，我不希望显示顶部栏和底部栏

---

我怎么做？有人能帮我吗？谢谢。

更改布局组件，如下所示：

const布局：React.FC=（{children}）=>{
const history=useHistory（）；
const isItemsPath=history.location.pathname.includes（“/items”）；
返回(
{！isItemsPath&&}
{儿童}
{！isItemsPath&&}
);
}

按如下方式更改布局组件：

const布局：React.FC=（{children}）=>{
const history=useHistory（）；
const isItemsPath=history.location.pathname.includes（“/items”）；
返回(
{！isItemsPath&&}
{儿童}
{！isItemsPath&&}
);
}

难道你不能将一个道具传递给

布局组件来有条件地隐藏顶栏吗
{renderHeader？：null}
你能不能把一个道具传递给
布局
组件来有条件地隐藏顶栏<代码>{renderHeader？:null}

我想有

！isItemsPath&

应该放在像

{！isItemsPath&&}

这样的大括号内，否则javascript检查将不会生效。如果我错了，请纠正我，我认为有

！isItemsPath&

应该放在像

{！isItemsPath&&}

这样的大括号内，否则javascript检查将不会生效。如果我错了，请纠正我