Реактивный маршрутизатор NavLink activeClassName не работает с избыточными и стилизованными компонентами

Question

У меня был проект, построенный из реактивных саг с редуксом и стилизованными компонентами. Я попытался создать навигационное меню с помощью NavLink и ожидал стилизовать активный элемент ссылки другим цветом, как показано ниже:

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>
    )}

Маршруты определены следующим образом:

<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>

Проблема в том, что при нажатии на пункт меню активный класс не добавляется; следовательно, стиль не применяется. У кого-нибудь есть идеи, в чем может быть проблема и как это исправить? Благодарю.

Answer 1

Нет логики, которая обрабатывает активацию currentRoute -> className. В вашем случае вы можете использовать matchPath из 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>

Код выше установит active имя класса, если ссылка меню соответствует текущему маршруту.