如何在react-router-dom中隐藏header组件？

Question

我有一个像这样的 React 应用程序 here 我想从登录和注册等页面隐藏全局 header 组件。我在互联网上的 React-Router-v4 中找不到任何方法。任何人都可以告诉我进一步的进展吗？

const App = () => (
  <Router>
    <div className="app-wrapper">
      <Header />
      <main>
        <Route path="/" exact component={Home} />
        <Route path="/login" exact component={Login} />
        <Route path="/contact" component={Contact} />
      </main>
      <footer>
        &copy; Acme Inc. 2017
      </footer>
    </div>
  </Router>
);

Answer 1

如果你只是想hide/show基于授权状态的header，那么你可以将包含授权状态的object传递给基于Header的组件它将在其上呈现菜单项。

我在这里 fork 了演示：https://codesandbox.io/s/pjyl9y17rx

这里我只是传递一个授权状态的布尔值，但你明白了。

根据路径呈现路线的另一种选择是在路径中使用正则表达式，我相信这是支持的，通过这个对话： https://github.com/ReactTraining/react-router/issues/391

Answer 2

您可以使用 withRouter 高阶组件访问应用程序组件中的 props.location 对象，并使用 props.location.pathname

检查用户是否在登录或注册页面

请记住，如果您要访问 props.match 或 props.location 对象的组件是由 [=17= 呈现的，则不必使用 withRouter 组件]

import {Route, withRouter} from 'react-router-dom'

const App  = (props) => {
return(
  <Router>
    <div className="app-wrapper">
     {
      props.location.pathname!=='/login' ? <Header/>:null
     }
      <main>
        <Route path="/" exact component={Home} />
        <Route path="/login" exact component={Login} />
        <Route path="/contact" component={Contact} />
      </main>
      <footer>
        &copy; Acme Inc. 2017
      </footer>
    </div>
  </Router>
)
};


export default withRouter(App);

Answer 3

我通过在 header 组件中导入 useLocation 挂钩来做到这一点

const location = useLocation()

{
  location.pathname=='/signin' ? <Link to='/' >Back to Homepage</Link> : 
     <div class="header">
      <li>...<li>
       .
       .
       .  
     <div>
}

Answer 4

这是另一种不使用位置隐藏它的方法

<Router>
              <Switch>
                <Route exact path="/login">
                  <LogIn />
                </Route>
                <Fragment>
                  <SideBar />
     <main>
            <Route path="/" exact component={Home} />
            <Route path="/login" exact component={Login} />
            <Route path="/contact" component={Contact} />
          </main>
          <footer>
            &copy; Acme Inc. 2017
          </footer>
                </Fragment>
              </Switch>
            </Router>

如何在react-router-dom中隐藏header组件？

How to hide header component in react-router-dom?

reactjs

react-router-v4

react-router-dom