react:连接的react路由器默认路由,不更新到[组件]的路径

我以前在我的项目中使用react路由器。这给了我没有问题,但当我决定使用redux我升级我的路由器到“连接反应路由器”。从那时起,当应用程序启动时,redux说它的基本路径是“/”。这在技术上是正确的,它加载了teams组件。

但问题是,不应用它的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);

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

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

单击链接后: