更改“to”属性的结构时，NavLink activeClassName 属性不起作用

Question

我们都知道，在“to”中，我们将路线放置在我们想去的地方 喜欢

<NavLink to={`${option.value}`} activeClassName="active">Click Me <./NavLink>

但是当我把它改成

<NavLink to={{
            pathname: `${option.value}`,
            state: {scroll: true}
          }} activeClassName="active">Click Me <./NavLink>

它仍然可以正常工作，但现在 activeClassName 无法正常工作。 这样做的原因是当用户单击此链接时，我希望历史记录中的滚动属性。 onClick 和另一个函数不会发生这种情况，因为在路线更改时，历史记录会被重置。 谁能告诉我这个问题的解决方案，我怎样才能让历史滚动并让 activeClassName 也能正常工作。

Answer 1

您必须在

标签内使用 Navlink；

这里有一个例子：

      <ul className={classes.sidebarList}>
        {sidebarList.map((sidebarItem, sidebarIndex) => {
          const { ICON } = sidebarItem;
          return (
            <NavLink
              key={sidebarIndex}
              exact
              to={sidebarItem.PATH}
              activeClassName={classes.sidebarActiveLink}
              className={classes.sidebarListItem}
            >
              <ICON
                className={classes.sidebarIcon}
              />
              <div className={classes.sidebarTitle}>{sidebarItem.title}</div>
            </NavLink>
          );
        })}
      </ul>