我有一个导航,我很难尝试设置样式。我已经能够将活动类添加到导航元素并将样式应用到它们,但是当我单击它时,用作主页的主仪表板没有应用专用的活动类。在应用程序中进行了一些挖掘之后,我相信 AppRouter.js 或 routeConfig.js 可能是问题所在。
导航元素与下面的 Navlink 代码一起显示:
renderNavigationItem = (navigationItem) => {
const { classes } = this.props;
const { id, name, parentUrlLink } = navigationItem;
return (
<NavLink exact key={id.toString()} to={{ pathname: parentUrlLink }} className="desk-link"
activeClassName='is-active'>
<MenuItem className={classes.fontBoldHeader}>{name}</MenuItem>
</NavLink>
);
}
应用路由器如下所示:
class AppRouter extends Component {
constructor(props, context) {
super(props);
this.context = context;
}
render() {
const { account } = this.context;
return (
<Switch>
{account ? <Redirect exact from="/" to={{ pathname: '/dashboard' }} /> : <Route exact path="/" component={Home} />}
{routes.map((item) => <PrivateRoute {...item} key={`${item.path}-route`} />)}
<Route path="/sessiontimeout" render={(props) => <TimedOutPage {...props} />} />
<Route path="/500" render={(props) => <Error errorCode="500" {...props} />} />
<Route path="/503" render={(props) => <Error errorCode="503" {...props} />} />
<Route path="*" render={(props) => <Error errorCode="404" {...props} />} />
</Switch>
);
}
}
看起来“仪表板”页面有一个特定的规则。如果他们单击徽标,这也是人们访问的页面,所以我觉得有一个特定的规则阻止仪表板页面继承“is-active”类。我是 React 的新手,所以目前这有点超出我的想象,任何帮助都将不胜感激!
编辑:这里是 rednerNavigation 被调用的地方:
renderNavigation = () => {
const { menuNavigation } = this.props;
return menuNavigation.map((item) => {
if (item.children.length > 0) {
return this.renderNavigationItemWithSubNav(item);
}
return this.renderNavigationItem(item);
});
}