React-routerの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> 
    ) 
} 

て反応-ルータを親：

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、それを解決しているように見える - これは適切な解決策か、単に回避策であるかどうかわからないが、トリックを行っているようです。

回答は<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>