javascript 我如何删除页脚组件只在特定的网页?

lf5gs5x2  于 2023-06-04  发布在  Java
关注(0)|答案(3)|浏览(137)

(我使用的是React -类组件
我正在寻找如何删除页脚组件只在特定的页面,但我不知道。其实我不知道该用什么关键词搜索。
下面的代码是我的Router.js

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Navbar />
        <Switch>
          <Route exact path="/" component={Main}></Route>
          <Route exact path="/review" component={ReviewPage}></Route>
        </Switch>
        <Footer />
      </Router>
    );
  }
}

export default Routes;

我把页脚和导航栏组件在路由器一样,因为这些总是存在于每个页面。但不幸的是,我刚刚发现在ReviewPage中,没有FOOTER....
如何在ReviewPage中仅删除页脚?请给予我提示!

kxeu7u2r

kxeu7u2r1#

可以使用location.pathname。返回当前的url路径名。然后你可以设置一个条件如下:

{location.pathname !== '/review' && <Footer />}

解决方案

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Navbar />
        <Switch>
          <Route exact path="/" component={Main}></Route>
          <Route exact path="/review" component={ReviewPage}></Route>
        </Switch>
        {location.pathname !== '/review' && <Footer /> }
      </Router>
    );
  }
}

export default Routes;
9ceoxa92

9ceoxa922#

{Location.pathname === '/photographer/:id' && }
你可以看到新版本的React-router
现在使用位置!=位置和它的工作

<>
        <Header />
        <main>
            <Container>
            
                <Routes>
                    <Route path='/' element={<HomeScreen />}></Route>
                    <Route
                        path='/photographer/:id'
                        element={<PhotographersScreen/>}
                        ></Route>
                </Routes>
                
            </Container>
        </main>
        {Location.pathname === '/photographer/:id' && <Footer />}
    </>
piok6c0g

piok6c0g3#

请参阅提供的链接,因为它可能会帮助您找到解决方案:https://stackoverflow.com/a/76396473/16033501

相关问题