所以这是我的路线定义:
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
时设置。知道我做错了什么,或者是库中的错误?
路由器正在更新商店,如下所示: