Reactjs 在react路由器dom中的某些页面上隐藏标头

在React路由器中，有没有一种方法可以只隐藏某些路由的页眉？我现在的问题是，我的应用程序组件呈现我的主组件，其中包含我的BrowserRouter，而我的头在我的应用程序组件中呈现，因此我无法基于路由路径呈现头

下面是一些代码：

App.js

---

在此应用程序中，我想隐藏登录页面上的页眉和页脚。

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

---

我最终使用了Redux。这是最好的选择，因为我有20多页，下面的代码中只显示了3页，所有这些页面的页眉/页脚的可见性都不同。我为页眉和页脚创建了一个减速机。以下是我的解决方案：

import ...

class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                {this.props.header ? <Header/> : ''}
                <Switch>
                    <Route exact path='/' component={Home}/>
                    <Route exact path='/login' component={Login}/>
                    <Route exact path='/signup' component={Signup}/>
                </Switch>
                {this.props.footer ? <Footer/> : ''}
            </BrowserRouter>
        );
    }
}

const mapStateToProps = state => state;
export default connect(mapStateToProps)(App);

---

你可以这样做：

{authrouts.map{path，component:C}=> } > } {routes.map{path，component:C}=> } > } 我通常在另一个文件中定义所有路由，并按组导出它们。这使我能够：

在一个位置定义所有布线 更干净地处理不同的路由组

---

您可以使用Context/Provider/Consumer来执行此操作，也可以更改逻辑，将页眉和页脚作为主页的子项，而不是登录页。您也可以使用专门针对mobx用户界面的存储来完成此操作。@kemicofa如果我将页眉和页脚作为主页的子项而不是登录页，那么在导航到另一个也有页眉和页脚的页面时，它们不会被重新呈现吗？是的，您是对的，但这不是一个繁重且最简单的解决方案。但是，如果您希望保持当前设置，请查看此推荐的或。他们都能解决这个问题。您最终可以使用refs，但这是反模式的，最好远离它。

import React from 'react';
import {Route, Switch} from 'react-router-dom';
import Home from './Home';
import Login from './Login';

const Main = () => (
    <main>
        <Switch>
            <Route exact path='/' component={Home}/>
            <Route exact path='/login' component={Login}/>
        </Switch>
    </main>
);

export default Main;

import {BrowserRouter, withRouter} from 'react-router-dom'
const App = () => (
   <BrowserRouter>

     {
      props.location.pathname!=='/login' ? <Header/>:null
     }
        <Main/>
        <Footer/>

   </BrowserRouter>
);

export default withRouter(App);

import ...

class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                {this.props.header ? <Header/> : ''}
                <Switch>
                    <Route exact path='/' component={Home}/>
                    <Route exact path='/login' component={Login}/>
                    <Route exact path='/signup' component={Signup}/>
                </Switch>
                {this.props.footer ? <Footer/> : ''}
            </BrowserRouter>
        );
    }
}

const mapStateToProps = state => state;
export default connect(mapStateToProps)(App);