Question

我有一个使用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>

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

Answer 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类名称。

React Router NavLink activeClassName不适用于redux和样式化组件

1 个答案: