activeClassName of react-router v4 not working appropriately

Question

I am very new to react-routing. After reading the docs and reading some articles this is how structured my routing. Please correct me if I am doing wrong.

Using react-router V4

Routes.js

import React from 'react';
import App from '../app/components/App';
import Dashboard from '../dashboard/components/Dashboard';
import Contact from '../dashboard/components/Contact';
import Account from '../dashboard/components/Account';
import Career from '../dashboard/components/Career';
import NoMatch from './NoMatch';
import { Provider } from 'react-redux';
import { Route, BrowserRouter, Switch, Redirect } from 'react-router-dom';

const Root = ({ store }) => (
    <Provider store={store}>
        <BrowserRouter>
            <div>
                <Route path="/app" component={App} />
                <Switch>
                    <Route path="/app" exact component={Dashboard} />
                    <Route path="/app/home/dashboard" component={Dashboard} />
                    <Route path="/app/home/contact" component={Contact} />
                    <Route path="/app/home/account" component={Account} />
                    <Route path="/app/home/career" component={Career} />
                    <Route component={NoMatch} />
                </Switch>    
            </div>
        </BrowserRouter>
    </Provider>
)

export default Root

I used /app 2 times. First is to load always as it has sidenav and header. Then inside switch I used to load default component dashboard.

App.js

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.min.css'; 
import Header from './Header';
import SideNav from './SideNav';


class AppComp extends Component {
    componentDidMount() {
        const { match: { params } } = this.props;
    }

    render() {  
        return (
            <div>
                <div className="container body">
                    <div className="main_container">
                        <Header />
                        <SideNav routeparams={this.props}/>
                    </div>
                </div>
            </div>
        );
    }
}

export default AppComp;

Sidenav.jsx

    import React, { Component } from 'react';
    import { NavLink } from 'react-router-dom'
    import '../../css/sidenav.css';

    class SideNav extends Component {
    render() {
       console.log(this.props.routeparams); 
        return (
            <div className="col-md-3 left_col">
                <div className="left_col">
                    <div className="clearfix"></div>
                        <div id="sidebar-menu">
                            <div className="menu">
                               <ul className="nav side-menu">
                                <li>
                                    <NavLink to="/app/home/dashboard">Home</span></NavLink>
                                    <ul>
                                        <li className="current-page">
                                            <NavLink to="/app/home/dashboard" activeClassName="current">Dashboard</NavLink>
                                        </li>
                                        <li>
                                            <NavLink to="/app/home/contact" activeClassName="current">Contact</NavLink>
                                        </li>
                                        <li>
                                            <NavLink to="/app/home/account" activeClassName="current">Account</NavLink>
                                        </li>
                                        <li>
                                            <NavLink to="/app/home/career" activeClassName="current">Career</NavLink>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default SideNav;

I have two issue :

• this.props.routeparams in sidenav logged twice which means sidenav rendered twice . this is happening after adding routing . Also this.props.routeparams match path is always /app, which I think because sidenav is a child component of app component. How can I fix this ? I want to get current route path in sidenav.

• activeClassName="current" gets applied to correct navlink but the css style gets reflected only if I click somewhere in the page. Seems so strange. I can resolve that issue if I get current match.path at sidenav component then I will do it custom way without activeClassName.

Any help would be greatly appreciated.