I've got a navigation that I am having a hard time trying to style. I have been able to add active classes to the navigational elements and apply styles to them, however the main dashboard which functions as a homepage does not get the dedicated active class applied to it when I click it. After doing a little bit of digging around in the app, I believe the AppRouter.js or routeConfig.js might be the issue.
The navigational elements are displayed with the Navlink code below:
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>
);
}
The app router looks like this:
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>
);
}
}
It looks like there's a specific rule that is in place for the "dashboard" page. It is also the page people go to if they click the logo so I feel like there is a specific rule that is preventing the dashboard page to inherit the "is-active" class. I am new to React so this is something that is a little over my head at the moment and any help would be greatly appreciated!
Edit: Here is where rednerNavigation is called:
renderNavigation = () => {
const { menuNavigation } = this.props;
return menuNavigation.map((item) => {
if (item.children.length > 0) {
return this.renderNavigationItemWithSubNav(item);
}
return this.renderNavigationItem(item);
});
}