React-router activeClassName not working as expected

Question

For some reason, when I load/refresh the page in my app, the correct link is shown as active. When I click on a different link, it works as expected and becomes active, however the original link is also showing up as active.

UPDATE: I've just realised that when I click anywhere outside the menu bar, the active link loses its active status aswell, but the original link remains active. Essentially, when I click elsewhere, the menu returns to the example given in the first screenshot, even though the route URL is different.

Perhaps easier to demonstrate with screenshots:

This is shown on page load/refresh - as expected

But click on another link, and both of them now show as active

Click on another one, and the active link changes, but the original one is still showing as active as well

Here's my code:

One of the link elements (they are all identical, apart from SVG code and labels):

const AnnouncementLink = (props) => {
    return(

        <Link   to="/announcements" 
                className={styles.assignmentLinkHolder} 
                activeClassName={styles.activeLinkHolder}
                onClick={()=>props.hideSlideOver()}>
            <span className={styles.iconHolder}>
                <svg>
                  //Lots of SVG code here!
                </svg>
                <span className={styles.label}>
                    Announcements
                </span>
            </span>
        </Link>
    )
}

The menu element in full (not including some of the variable declarations which aren't relevant):

const photo = require('../../images/profilePics/blankface.jpg');

const SideMenu = (props) => {

    //VARIABLE DECLARATIONS...

    return (
        <div className={styles.sideMenu}>
            <img src={photo} className={styles.profilePic} />
            <div className={styles.menuItem}>
                <DashboardLink hideSlideOver={props.hideSlideOver} />
                <CoursesLink hideSlideOver={props.hideSlideOver} />
                <AssignmentsLink    hideSlideOver={props.hideSlideOver} 
                                    badge={totalAssignments} />
                <UsersLink hideSlideOver={props.hideSlideOver} />
                <AnnouncementsLink hideSlideOver={props.hideSlideOver} />
                <ReportsLink hideSlideOver={props.hideSlideOver} />
                <DiscussionsLink hideSlideOver={props.hideSlideOver} />
            </div>
        </div>
    )   
}

And the React-router parent:

const Admin = () => {
    return (
        <Provider store={createStoreWithMiddleware(rootReducer)}>
            <Router history={browserHistory}>
                <Route path="/" component={Academy}>
                    <IndexRedirect to="/dashboard" />
                    <Route path="/dashboard" component={Dashboard} />
                    <Route path="/courses" component={CoursesMenu} />
                    <Route path="/assignments" component={AssignmentsMenu} />
                    <Route path="/users" component={UsersMenu} />
                    <Route path="/announcements" component={AnnouncementsMenu} />
                </Route>
            </Router>
        </Provider>

    )
}

Answer 1

OK, seem to have resolved it - not sure if this is a proper solution or just a workaround, but it seems to have done the trick.

The answer lies in the <SideMenu> component. By giving it a prop of path and linking this to the changing URL, it rerenders the component each time the URL changes. Also by removing <IndexRedirect> as suggested by oklas and changing it to <Route to='/'> , it prevents the active class from sticking on the <DashBoard> link.

Here's the code - this is from a section of the app that wasn't referenced above - the parent of <SideMenu>

<div className={styles.container}>
    <SideMenu path={this.props.children.props.route.path} /> { //This 'path' property solves the problem by rerendering the SideMenu component every time the path changes }
    <ViewPort>
        {this.props.children}
    </ViewPort>
</div>