反应路由器activeClassName不能按预期工作

Question

由于某些原因，当我加载/刷新应用中的页面时，正确的链接显示为活动状态。 当我单击其他链接时，它会按预期工作并变为活动状态，但是原始链接也显示为活动状态。

更新：我刚刚意识到，当我单击菜单栏之外的任何位置时，活动链接也会丢失其活动状态，但是原始链接仍然保持活动状态。 本质上，当我单击其他位置时，菜单会返回到第一个屏幕截图中给出的示例，即使路线URL不同。

也许更容易用屏幕截图演示：

如预期的那样，这在页面加载/刷新上显示

但是，单击另一个链接，它们现在都显示为活动状态

单击另一个，活动链接就会更改，但是原始链接仍然显示为活动

这是我的代码：

链接元素之一（除了SVG代码和标签外，它们都是相同的）：

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

完整的菜单元素（不包括一些不相关的变量声明）：

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

和React-router父代：

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

好的，似乎已经解决了该问题-不确定这是否是正确的解决方案还是只是解决方法，但似乎可以解决问题。

答案在于<SideMenu>组件。 通过为其提供path并将其链接到更改的URL，每次URL更改时，它都会重新呈现组件。 同样通过<IndexRedirect>建议删除<IndexRedirect>并将其更改为<Route to='/'> ，它可以防止活动类停留在<DashBoard>链接上。

这是代码-这是上面未引用的应用程序部分的内容- <SideMenu>的父<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>