Как сделать, чтобы боковая панель сворачивалась и расширялась после входа в систему без обновления

Question

Я новичок в реагировании, я работаю над проектом с использованием AdminLte и создаю боковую панель, разворачиваюсь и сворачиваюсь проблема в том, что когда я захожу на сайт и захожу на домашнюю страницу, мне нужно перезагрузить, чтобы все работало, в противном случае боковая панель не работает, пока я не перезагрузлю ее

и вот мой код в sidebar.js

import { Link } from 'react-router-dom';
import { ItReportSidebarComponent } from './it_reports_sidebar_component';
import { InspectionReportSidebarComponent } from './inspection_reports_sidebar_component';
import { ActorSideBarComponent } from './actors_siderbar_component';
import { TransportationSideBarComponent } from './transportation_sidebar_component';


import './sidebar.css';

export const Sidebar = () => (
    <aside className='main-sidebar'>
        <section className='sidebar' style={{ height: 'auto' }}>
            <ul className='sidebar-menu tree' data-widget='tree' style={{ listStyleType: 'none' }}>
                <li className='header'>ADMINISTRATION</li>
                <li>
                    <Link to='/'>
                        <i className='fas fa-tachometer-alt' />

                        <span> Dashboard</span>
                    </Link>
                </li>
                <TransportationSideBarComponent />
                <ActorSideBarComponent />
                <ItReportSidebarComponent />
                <InspectionReportSidebarComponent />
            </ul>
        </section>
    </aside>
);

, поэтому я ожидал, что боковая панель будет работать правильно после входа в систему

и это где я отображаю боковую панель

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

import { Dashboard } from '../components/sections/dashboard/dashboard';
import ItReportLogsRoutes from './sections/it_report_logs/it_report_logs_routes';
import InspectionReportRoutes from './sections/inspection_report/inspection_routes';
import DriversRoutes from './sections/drivers/drivers_routes';

import VehiclesRoutes from './sections/vehicles/vehicles_routes';

import RoutesRoutes from './sections/routes/routes_routes';
import AxesRoutes from './sections/axes/axes_routes';
import TransactionsRoutes from './sections/transactions/transactions_routes';
import BaseFaresRoutes from './sections/base_fare/base_fares_routes';
import Issues from './sections/issues/issues';
import requireAuth from './auth/Authentication';
import noRequireAuth from './auth/NotAuthentication';
import Header from '../components/header/Header';
import { Sidebar } from './sidebar/Sidebar';

import Login from './auth/Login';
import Logout from './auth/Logout';

class AppRouter extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        if (!this.props.authenticated) {
            return (
                <BrowserRouter>
                    <Switch>
                        <Route path='/login' component={noRequireAuth(Login)} />
                        <Redirect to='/login' />
                    </Switch>
                </BrowserRouter>
            );
        }
        return (
            <BrowserRouter>
                <Fragment>
                    <Header />
                    <Sidebar />
                    <Switch>
                        {/* <Route path='/logout' component={Dashboard}/> */}
                        <Route path='/' component={requireAuth(Dashboard)} exact />
                        {/* it reports */}
                        <Route path='/it-report-logs' component={requireAuth(ItReportLogsRoutes)} />
                        {/* <Route path='/it-report-logs' component={requireAuth(ItReportLogsRoutes)}/> */}

                        {/* Inspection Report Logs */}
                        <Route path='/inspection' component={requireAuth(InspectionReportRoutes)} />
                        {/* <Route path='/inspection/logs' component={requireAuth(InspectionReportRoutes)}/> */}
                        <Route path='/drivers' component={requireAuth(DriversRoutes)} />

                        <Route path='/vehicles' component={requireAuth(VehiclesRoutes)} />

                        <Route path='/routes' component={requireAuth(RoutesRoutes)} />
                        <Route path='/axes' component={requireAuth(AxesRoutes)} />
                        <Route path='/transactions' component={requireAuth(TransactionsRoutes)} />
                        <Route path='/basefares' component={requireAuth(BaseFaresRoutes)} />

                        {/* Issues */}
                        <Route path='/issues' component={requireAuth(Issues)} />
                        <Route path='/logout' component={requireAuth(Logout)} />
                        <Redirect to='/' />
                    </Switch>
                </Fragment>
            </BrowserRouter>
        );
    }
}

AppRouter.propTypes = {
    authenticated: PropTypes.bool
};

function mapStateToProps(state) {
    return {
        authenticated: state.auth.authenticated
    };
}

export default connect(mapStateToProps)(AppRouter);