反應路由器activeClassName不能按預期工作

由於某些原因，當我在我的應用中加載/刷新頁面時，正確的鏈接顯示爲活動。當我點擊不同的鏈接時，它按預期工作，並且變爲活動狀態，但原始鏈接也顯示爲活動狀態。反應路由器activeClassName不能按預期工作

更新：我剛剛意識到，當我點擊菜單欄外的任何地方時，活動鏈接也會失去其活動狀態，但原始鏈接仍保持活動狀態。本質上，當我點擊其他地方時，即使路由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> 
    ) 
}

而做出反應路由器父：

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> 

    ) 
}

來源

2017-01-27 Chris

道歉截圖的大小父 - 不知道他們會是大，直到我已經發布的問題！ – Chris

嘗試從路由器中刪除具有「IndexRedirect」的代碼字符串。請不要忘記寫出解決問題的結果。 – oklas

你好，抱歉我已經離線了幾天。試圖帶走IndexRedirect但沒有任何區別 - 還有什麼想法？ – Chris

OK，似乎已經解決了它 - 不知道這是一個妥善的解決辦法，或只是一種變通方法，但它似乎已經完成了帽子戲法。

答案在於<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>

來源

2017-01-31 11:40:12 Chris

反應路由器activeClassName不能按預期工作

回答

相關問題