Question

我正在使用像这样的React应用here我想隐藏登录和注册等页面中的全局标头组件。我在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

如果您只是想根据授权状态隐藏/显示标题，则可以将包含授权状态的对象传递给Header组件，根据该组件呈现菜单项。

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

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

基于路径呈现路由的另一个选项是在路径中使用正则表达式，我认为这是由此对话支持的： https://github.com/ReactTraining/react-router/issues/391

Answer 2

您可以使用withRouter高阶组件访问App组件中的props.location对象，并使用props.location.pathname检查用户是否在登录页面或注册页面上

请记住，如果您要访问withRouter或props.match对象的组件是由props.location呈现的，则不必使用<Route/>组件< / p>

import {Route, withRouter} from 'react-router-dom'
const App = () => (
  <Router>
    <div className="app-wrapper">
     {
      props.location.pathname!=='/login' ? <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>
);

export default withRouter(App);

如何隐藏react-router-dom中的头部组件？

2 个答案: