Реакция: маршрут по умолчанию подключен-реагирует-маршрутизатор, не обновляет путь до [Компонент]

Question

Раньше я использовал React Router в своем проекте.Это не дало мне никаких проблем, но, когда я решил использовать redux, я обновил свой маршрутизатор до «Connected-React-router».С тех пор, когда приложение запускает Redux, он говорит, что его базовый путь - «/».Что технически правильно и загружает компонент Команды.

Проблема, однако, в том, что не применяется его activeClassName.Хотя я понимаю, что происходит, я не мог найти решение этой проблемы.Любые советы / решения будут высоко оценены.

Мой индекс входа (используется для адала)

import { runWithAdal } from 'react-adal';
import { authContext } from './adalConfig';

const DO_NOT_LOGIN = false;

runWithAdal(authContext, () => {

  // eslint-disable-next-line
  require('./indexApp.js');

},DO_NOT_LOGIN);

Мой indexApp (обычный индекс)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/app/App';
import 'react-app-polyfill/ie11';
import { Provider } from 'react-redux';
import { Route } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router';

import nl from 'react-intl/locale-data/nl';
import en from 'react-intl/locale-data/en';
import { addLocaleData } from "react-intl";

import 'bootstrap/dist/css/bootstrap.min.css';

import configureStore, { history }  from './store/configureStore';
import ReactAI from 'react-appinsights';


ReactAI.init({instrumentationKey:'3d39a90c-bf60-4d34-a461-2eecca9d3392'}, history);

addLocaleData([...en, ...nl]);

const store = configureStore(/* provide initial state if any */);

ReactDOM.render(
    <Provider store={ store }>
        <ConnectedRouter history={history}>

            <Route component={App} />

        </ConnectedRouter>
    </Provider>, document.getElementById('root')
);

Мои маршруты:

import React from 'react';
import CommandBar from './commandBar/commandBar';
import SummarySection from './summarySection/SummarySection';

import { Route, Switch} from 'react-router-dom';
import TeamsContainer from '../teamsContainer/TeamsContainer';


class PageContainer extends React.Component {

    render() {
        return (
            <section className="main-page-content-wrapper">

                <div className="commandbar-wrapper" >
                    <CommandBar />
                </div>
                <div className="summary-wrapper">
                    <SummarySection />  
                </div>

                <div className="page-content">
                    <Switch>
                        {/* <Route path='/users' component={UserContainer} /> */}
                        <Route path='/teams' component={TeamsContainer} />
                        <Route path="/" component={TeamsContainer} />
                    </Switch> 
                </div>

            </section>  
        );
    }
}

export default PageContainer;

Моя левая навигация

import React from 'react';
import SearchBar from '../../common/utils/searchBar/searchBar';
import { NavLink } from 'react-router-dom';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { connect} from 'react-redux';
import { FormattedMessage, FormattedDate, FormattedTime , FormattedRelative, FormattedNumber  } from "react-intl";

class LeftNavigation extends React.Component {
    render() {
        return (
            <nav className="left-navigation-menu">
                    <SearchBar />

                    <h2><FormattedMessage id="nav.myTeams" defaultMessage="Mijn Teams"></FormattedMessage></h2>


                    <ul>
                        <li>
                            <NavLink to='/teams' activeClassName="left-nav__active-link" >
                                <div className="left-navigation-menu__menu-item-wrapper">
                                    <div className="left-navigation-menu__icon">
                                        <Icon iconName="Group"/> 
                                    </div>
                                    <div className="left-navigation-menu__text">
                                        <FormattedMessage id="nav.myTeams" defaultMessage="Mijn Teams"></FormattedMessage>
                                    </div>
                                </div>
                            </NavLink>
                        </li>
                        <li>
                            <NavLink to='/users' activeClassName="left-nav__active-link" >
                                <div className="left-navigation-menu__menu-item-wrapper">
                                    <div className="left-navigation-menu__icon">
                                        <Icon iconName="Search"/> 
                                    </div>
                                    <div className="left-navigation-menu__text">
                                    <FormattedMessage id="nav.discoverTeams" defaultMessage="Mijn Teams"></FormattedMessage>
                                    </div>
                                </div>
                            </NavLink>
                        </li>
                    </ul>
            </nav>
        );
    }
}

const mapStateToProps = state => {
    return {
      router: state.routersSlice
    }
  }

export default connect(mapStateToProps)(LeftNavigation);

Снимок экрана при первой загрузке приложения:

После нажатия на ссылку: