使用react-router不按预期更新活动类

时间:2016-09-20 19:17:20

标签: reactjs react-router

所以这是我的路线定义:

export const createRoutes = (store) => ({
  path: '/',
  component: CoreLayout,
  indexRoute: HomeRoute(store),
  childRoutes: [
    {
      onEnter: verifyAuthentication(store),
      component: redirectOnAuthenticationLost(),
      childRoutes: [
        // Authenticated Routes
        CounterRoute(store)
      ]
    },
    {
      childRoutes: [
        // Open Routes
        GameRoute(store),
        {
          ...Login,
          onEnter: redirectAuthentication(store)
        }
      ]
    }
  ]
});

这是我的菜单组件,位于CoreLayout中。

export const Menu = (props) => (
  <menu className={classes.menu}>
    <ul className={classes.menuList}>
      <li className={classes.menuItem}>
        <IndexLink activeClassName="active" to="/">Terra<strong>Strike</strong></IndexLink>
      </li>
      <li className={classes.menuItem}>
        <IndexLink activeClassName="active" to="/game">Game</IndexLink>
      </li>
      <li className={classes.menuItem}>
        <IndexLink activeClassName="active" to="/counter">Counter</IndexLink>
      </li>
      <li className={classes.menuItem} style={{display: props.isAuthenticated ? 'none' : 'inline-block'}}>
        <IndexLink activeClassName="active" to="/login">Login</IndexLink>
      </li>
      <li style={{display: !props.isAuthenticated ? 'none' : 'inline-block'}} className={classes.menuItem}>
        <a href="#" onClick={props.logout}>Logout</a>
      </li>
    </ul>
  </menu>
);

菜单的导航按预期工作,但活动类仅在最初设置并且更改道具isAuthenticated时设置。知道我做错了什么,或者是库中的错误?

路由器正在更新商店,如下所示:

store

0 个答案:

没有答案