I had a project built with react redux sagas and styled components. I tried to create navigation menu with NavLink and expected to style active link item with a different color as below:

const MenuLink = styled(NavLink)`
    color: #fff;

    &.active {
       color: ${appColor}; 
    }
`;

export class Menu extends React.Component {
    static propTypes = {
        user: PropTypes.object.isRequired,
    };

render() {
  const { user } = this.props;
  return (
  <MenuWrapper>
    <Box textAlign="center" borderRight="#fff 1px solid">
      <MenuLink to="" activeClassName="active" exact={true}>
        Trang Chủ
      </MenuLink>
    </Box>
    {user.isAuthenticated && (
      <Box textAlign="center" borderRight="#fff 1px solid">
        <MenuLink to="/team" activeClassName="active" exact={true}>
          Đội Hình
        </MenuLink>
      </Box>
    )}
    {user.isAuthenticated && (
      <Box textAlign="center" borderRight="#fff 1px solid">
        <MenuLink to="/points" activeClassName="active" exact={true}>
          Điểm Số
        </MenuLink>
      </Box>
    )}

The Routes are defined as follows:

<Router history={history}>
    <ThemeProvider theme={theme}>
      <AppWrapper logged={user.isAuthenticated}>
        <Helmet
          defer={false}
          htmlAttributes={{ lang: 'pt-br' }}
          encodeSpecialCharacters={true}
          defaultTitle={config.title}
          titleTemplate={`%s | ${config.name}`}
          titleAttributes={{ itemprop: 'name', lang: 'pt-br' }}
        />
        <Header dispatch={dispatch} user={user} />
        <Main isAuthenticated={user.isAuthenticated}>
          <Switch>
            <Route path="/" exact component={Home} />
            <RoutePrivate
              isAuthenticated={user.isAuthenticated}
              path="/team"
              component={Team}
            />
            <RoutePrivate
              isAuthenticated={user.isAuthenticated}
              path="/points"
              component={Points}
            />
            <RoutePrivate
              isAuthenticated={user.isAuthenticated}
              path="/private"
              component={Home}
            />
            <Route path="/home" exact component={Home} />
            <Route path="/register" exact component={Signup} />
            <Route path="/login" exact component={Signin} />
            <Route path="/schedule" exact component={Schedule} />
            <Route path="/rules" exact component={Rules} />
            <Route path="/rank" exact component={Rank} />
            <Route path="/stats" exact component={Stats} />
            <Route path="/about" exact component={About} />
            <Route component={NotFound} />
          </Switch>
        </Main>
        <Footer />
        <SystemAlerts />
        <GlobalStyles />
      </AppWrapper>
    </ThemeProvider>
  </Router>

The problem is when a menu item is clicked, the active class is not added; therefore, the style is not applied. Does anyone have any idea what could be the problem and how to fix this? Thanks.

1 Answers

-1
Fernando Montoya On

There is not logic that handles currentRoute -> className activation. In your case you could use matchPath from react-router: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/matchPath.md

const activeClassName = !!matchPath(window.location.pathname, { path: "team" }) ? "active" : "";

<MenuLink to="/team" activeClassName={activeClassName} exact={true}>
          Đội Hình
        </MenuLink>

Code above will set active class name if the menu link matches the current route.