Reactjs 全屏显示特定路线组件

我有一个react应用程序，其中有许多路由，所有路由特定的组件都呈现在一个布局中，其中页眉、页脚和导航都是公共的。但在特定页面上，我只想呈现该组件，隐藏所有标题和导航。这是我的主应用程序页面：

<BrowserRouter>
<div className="app">
    <Route exact path="/fullscreen" component={() => <FullScreenComponent />} />
    <Header />
    <div className="container">
        <Route exact path={routes.LANDING} component={() => <LandingPage />} />
        <Route exact path={routes.SIGN_UP} component={() => <SignUpPage />} />
        <Route exact path={routes.SIGN_IN} component={() => <SignInPage />} />
        <Route exact path={routes.PASSWORD_FORGET} component={() => <PasswordForgetPage />} />
        <Route exact path={routes.HOME} component={() => <HomePage />} />
    </div>
    <Footer />
</div>

} />
} />
} />
} />
} />
} />

---

这里我只想在页面上显示FullScreenComponent，但它也在页面底部显示页眉和页脚。我想把它们藏起来。我不想在浏览器上全屏显示它们，而不是在显示器上。有什么建议吗？

如果只想渲染路由，则必须有一个布尔语句或条件语句来隐藏其他语句，使其无法渲染：）

react router提供props.location.pathname来获取当前路径名，因此=>

<div className="app">
    {props.location.pathname==="/fullscreen"? 
    <Route exact path="/fullscreen" component={() => <FullScreenComponent />} /> :(
    <>
    <Header />
    <div className="container">
        <Route exact path={routes.LANDING} component={() => <LandingPage />} />
        <Route exact path={routes.SIGN_UP} component={() => <SignUpPage />} />
        <Route exact path={routes.SIGN_IN} component={() => <SignInPage />} />
        <Route exact path={routes.PASSWORD_FORGET} component={() => <PasswordForgetPage />} />
        <Route exact path={routes.HOME} component={() => <HomePage />} />
    </div>
    <Footer />
    </>)
</div>

{props.location.pathname==“/全屏”？
} /> :(
} />
} />
} />
} />
} />
)