React Router с частным маршрутом отображает пустую страницу

Все темы по теме прочитаны, но ответа так и не нашел

Всем привет,

У меня есть ошибка в моем коде, и, как всегда, я не могу ее найти, поэтому, пожалуйста, помогите мне найти способ заставить ее работать.

У меня есть приложение create-реагировать, где я пытаюсь добавить аутентификацию пользователя. Учебник, который я ищу: http://jasonwatmore.com/post/2018/09/11/react-basic-http-authentication-tutorial-example

Проблема: Когда я вхожу в систему, я вижу компонент "Панель инструментов" (точно), все в порядке. Но затем я нажимаю на другую ссылку, например «заказы» и т. д. У меня отображается пустая страница. Ошибок на консоли нет.

Давайте начнем с самого начала.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { configureFakeBackend } from './_helpers/fake-backend';
configureFakeBackend();

ReactDOM.render((
      <App />
), document.getElementById('root')); 

Файл App.js

import React, { Component } from 'react';
import './App.scss';
import MainContent from './components/MainContent.jsx';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { PrivateRoute } from './components/PrivateRoute';
import { LoginPage } from './LoginPage/LoginPage';


class App extends Component {
  render() {
    return (
            <Router>
              <Switch>
                <PrivateRoute exact path = "/" component = {MainContent} />
                <Route path = "/login" component = {LoginPage} />
              </Switch>
            </Router>
    );
  }
}

export default App;

PrivateRoute.jsx

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

export const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render = {props => (
        localStorage.getItem('user')
            ? <Component {...props} />
            : <Redirect to = {{ pathname: '/login', state: { from: props.location } }} />
    )} />
)

MainContent.jsx

import React, { Component } from 'react';
import Sidebar from './Sidebar.jsx';
import Header from './Header.jsx';
import Main from './Main.jsx';
import { userService } from '../_services/user.service';
import { Link } from 'react-router-dom';

class MainContent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            user: {},
            users: []
        };
    }
    componentDidMount() {
        this.setState({ 
            user: JSON.parse(localStorage.getItem('user')),
            users: { loading: true }
        });
        userService.getAll().then(users => this.setState({ users }));
    }
  render() {
    const { user, users } = this.state;
    return (

      <React.Fragment>
      <h1>Hi {user.firstName}!</h1>
      {users.loading && <em>Loading users...</em>}
      {users.length &&
          <ul>
              {users.map((user, index) =>
                  <li key = {user.id}>
                      {user.firstName + ' ' + user.lastName}
                  </li>
              )}
          </ul>
      }
      <p>
          <Link to = "/login">Logout</Link>
      </p>
        <Sidebar />
        <div id = "flexing">
            <Header />
            <Main />
          </div>
      </React.Fragment>
    );
  }
}

export default MainContent;

И хотя бы: Main.jsx

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import Orders from './Orders';
import Routes from './Routes';
import Drivers from './Drivers';
import Settings from './Settings';

const Main = () => (
  <main>
    <Switch>
      <Route exact path='/' component = {Dashboard}/>
      <Route path='/orders' component = {Orders}/>
      <Route path='/routes' component = {Routes}/>
      <Route path='/drivers' component = {Drivers}/>
      <Route path='/settings' component = {Settings}/>
    </Switch>
  </main>
);

export default Main;

Таким образом, компонент Dashboard будет отображаться хорошо, но другие будут отображаться как пустая страница. Пожалуйста, помогите исправить это. Ожидание ответа.

Как только