Reactでログインや登録画面のときだけheaderなどを表示しない方法

Reactでログインや登録画面のときだけHeaderなどを表示しないようにするにはどうしたらいいのでしょうか。
ログイン画面などを全画面にすることで表示しないことはできるのですが完全のHeaderなどを読み込まないにはなにか方法があるのでしょうか。

React
1import React, { Component } from 'react';
2import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
3import Header from './Components/Layout/Header';
4import LeftNav from './Components/Layout/LeftNav';
5import Dashboard from './Components/Dashboard';
6import Pay './Components/Pay';
7import Register from './Components/Accounts/Register';
8import Login from './Components/Accounts/Login';
9import Alerts from './Components/Layout/Alerts';
10import PrivateRoute from './Components/Common/PrivateRoute';
11import { Provider } from 'react-redux';
12import store from './store';
13import { Provider as AlertProvider } from 'react-alert';
14import AlertTemplate from 'react-alert-template-basic';
15import { loadUser } from './actions/auth'
16
17const alertOptions = {
18  timeout: 3000,
19  position: 'bottom right',
20};
21
22class App extends Component {
23  componentDidMount() {
24    store.dispatch(loadUser());
25  }
26  render() {
27    return (
28      <Provider store={store}>
29        <AlertProvider template={AlertTemplate} {...alertOptions}>
30          <Router>
31            <div className="app">
32              <LeftNav />
33              <Alerts />
34              <div>
35                <Header />
36                <div className="dashboard">
37                  <Switch>
38                    <PrivateRoute exact path='/' component={Dashboard} />
39                    <PrivateRoute exact path='/pay' component={Pay} />
40                    <Route exact path='/register' component={Register} />
41                    <Route exact path='/login' component={Login} />
42                  </Switch>
43                </div>
44              </div>
45            </div>
46          </Router>
47        </AlertProvider>
48      </Provider>
49    );
50  }
51}
52
53export default App;

下記のようにログイン・登録画面以外をDisplayComponentに分けるとログイン・登録画面のときだけHeaderなどを表示しないことはできたのですが、localhost:3000/payでリロードすると何も表示されなくなってしまいます。（DisplayComponentに分けない場合この症状は発生しない）

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Display from './Components/Layout/Display'
import Register from './Components/Accounts/Register';
import Login from './Components/Accounts/Login';
import Alerts from './Components/Layout/Alerts';
import PrivateRoute from './Components/Common/PrivateRoute';
import { Provider } from 'react-redux';
import store from './store';
import { Provider as AlertProvider } from 'react-alert';
import AlertTemplate from 'react-alert-template-basic';
import { loadUser } from './actions/auth'

const alertOptions = {
  timeout: 3000,
  position: 'bottom right',
};

class App extends Component {
  componentDidMount() {
    store.dispatch(loadUser());
  }
  render() {
    return (
      <Provider store={store}>
        <AlertProvider template={AlertTemplate} {...alertOptions}>
          <Router>
            <Alerts />
            <Switch>
              <PrivateRoute exact path='/' component={Display} />
              <Route exact path='/register' component={Register} />
              <Route exact path='/login' component={Login} />
            </Switch>
          </Router>
        </AlertProvider>
      </Provider>
    );
  }
}

export default App;

React
1import React, { Component } from 'react'
2import '../../App.css'
3import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
4import PrivateRoute from '../Common/PrivateRoute';
5import Dashboard from '../Pay/Dashboard'
6import Pay from './Pay';
7
8
9export class Display extends Component {
10    render() {
11        return (
12
13            <Router>
14                <div className="app">
15                    <LeftNav />
16
17                    <div>
18                        <Header />
19                        <div className="dashboard">
20                            <Switch>
21                                <PrivateRoute exact path='/' component={Dashboard} />
22                                <PrivateRoute exact path='/pay' component={Pay} />
23                            </Switch>
24                        </div>
25                    </div>
26                </div>
27            </Router>
28        )
29    }
30}
31
32export default Display;

行動規範の内容に同意します

回答1件

次のようにすれば/register /login にマッチしない場合に<PrivateRoute component={Display} />が表示されると思います

jsx
1<Switch>
2  <Route exact path='/register' component={Register} />
3  <Route exact path='/login' component={Login} />
4  <PrivateRoute component={Display} />
5</Switch>