React：connected-react-router默认路由，不更新[Component]

Question

我以前在我的项目中使用过React Router。这没有任何问题，但是当我决定使用redux时，我将路由器升级为“ Connected-React-router”。从那时起，应用程序启动时，redux会说它的基本路径是“ /”。从技术上讲，这是正确的，它将加载“团队”组件。

但是，问题在于不适用于它的activeClassName。即使我了解会发生什么，我也找不到解决此问题的任何方法。任何提示/解决方案将不胜感激。

我的进入索引（​​用于adal）

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);

首次加载应用程序时的屏幕截图：

点击链接后：