React 路由器 NavLink activeClassName 不适用于 redux 和样式化组件答案

【问题标题】：React router NavLink activeClassName does not work with redux and styled componentsReact 路由器 NavLink activeClassName 不适用于 redux 和样式化组件
【发布时间】：2019-08-23 05:19:36
【问题描述】：

我有一个使用 react redux sagas 和样式化组件构建的项目。我尝试使用 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>

问题是当一个菜单项被点击时，没有添加活动类；因此，不应用该样式。有谁知道可能是什么问题以及如何解决这个问题？谢谢。

【问题讨论】：

您可以在 StackBlitz 或类似平台上创建一个示例吗？从提供的代码中很难理解您的应用可能有什么问题。
你是 passing className 到 NavLink 下面的 DOM 节点吗？

标签： reactjs redux styled-components

【解决方案1】：

没有处理 currentRoute -> className 激活的逻辑。在您的情况下，您可以使用来自 react-router 的 matchPath：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 类名。

【讨论】：