在react-router-dom中隐藏某些页面的标题

有没有办法可以仅隐藏 React Router 中某些路由的页面标题？我现在的问题是我的App组件呈现我的Main组件，其中包含我的BrowserRouter， 和我的Header呈现在我的App组件，所以我无法根据路由路径渲染标题。

这是一些代码：

App.js

import React from 'react';
import {BrowserRouter} from 'react-router-dom';
import Main from './Main';
import Header from './Header';
import Footer from './Footer';

const App = () => (
    <BrowserRouter>
        <Header/>
        <Main/>
        <Footer/>
    </BrowserRouter>
);

export default App;

Main.js

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;

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

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

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

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

   </BrowserRouter>
);

export default withRouter(App);