Question

我有一个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，但它还在页面底部显示页眉和页脚。我想把它们藏起来。我不想在浏览器上而不是在监视器上将它们显示为全屏。有什么建议吗？

Answer 1

如果只想渲染路线，则必须有一个布尔值或条件语句才能将其他人隐藏起来：）

反应路由器提供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>

全屏显示特定的路线组件

1 个答案: