防止组件在特定页面 react-router 中呈现

Question

“导航栏”和“页脚”会在每个组件的页面上呈现。有没有办法防止在“用户”组件中呈现“页脚”？

App.js

   <Router>
    <Route>
      <Navbar />
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/About' exact component={About} />
      </Switch>
      <Footer />
    </Route>

    <Route>
      <Route path='/user' component={User} />
    </Route>

    <Route path='*' component={NotFound} />
  </Router>

Answer 1

将<Router> 移动到index.js 文件，如下所示，以访问App.js 中的props.location

<Router>
  <App />
</Router>

在您的 App.js 文件中：

const App = ({ location }) => {
  return (
    <Route>
      <Navbar />
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/About' exact component={About} />
      </Switch>
      {location.pathname !== '/user' && <Footer /> }
    </Route>
    <Route>
      <Route path='/user' component={User} />
    </Route>

    <Route path='*' component={NotFound} />
  )
}

此解决方案适用于 react-router 和 react-router-dom v5+