如何仅删除特定页面中的页脚组件？

Question

（我正在使用 React - Class Component）

我正在寻找如何仅在特定页面中删除页脚组件，但我不知道。其实我不知道要搜索什么关键字。

下面的代码是我的 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 中的页脚？请给我提示！

Answer 1

你必须使用window.location.pathname.它返回当前的 url 路径名。然后你可以设置一个条件，如下所示：

{window.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>
        {window.location.pathname !== '/review' && <Footer /> }
      </Router>
    );
  }
}

export default Routes;