Question

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

更新：我刚刚意识到，当我点击菜单栏外的任何地方时，活动链接也会失去其活动状态，但原始链接仍然有效。基本上，当我点击其他地方时，菜单会返回第一个屏幕截图中给出的示例，即使路径网址不同。

使用屏幕截图可能更容易展示：

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

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

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

这是我的代码：

其中一个链接元素（除了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 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

好的，似乎已经解决了 - 不确定这是一个合适的解决方案还是只是一种解决方法，但它似乎已经完成了这个伎俩。

答案在于<SideMenu>组件。通过给它path的支柱并将其链接到更改的URL，它会在每次URL更改时重新呈现组件。另外，按照oklas的建议删除<IndexRedirect>并将其更改为<Route to='/'>，它会阻止活动类粘贴在<DashBoard>链接上。

以下是代码 - 这是来自上面未引用的应用的一部分 - <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>

React-router activeClassName无法按预期工作

1 个答案: