javascript - 风格 react 路由器事件链接

Question

我正在使用 React router 3 进行路由。我尝试开发一个通用选项卡，但我不知道应该如何检查链接是否处于事件状态，以便我可以将类名作为“选定”传递给它。

这是我的代码

const FunctionalTab = ({ items, handleTabKey, ...props }) => {
  console.log("props", props.router);
  return (
    <x-tab>
      <x-tab-item>
        {(items || []).map((item, idx) => (
          <Link key={idx} onClick={() => handleTabKey(item)}>
            {" "}
            {item.name} <br />
          </Link>
        ))}
        <br />
      </x-tab-item>
    </x-tab>
  );
};

const enhance = compose(
  // handler responsible for changing the tab
  withHandlers({
    handleTabKey: props => route =>
      props.router.push(`/commissions/${props.params.id}/details/${route.to}`) // this to be generic 
  })
);

export default withRouter(enhance(FunctionalTab));

Answer 1

对于React Router 3:

您可以使用 Prop activeClassName <Link>的成分。请参阅docs .

例如:

 <Link
  to="/faq"
  activeClassName="selected"
 >FAQs</Link>

对于v4:

您需要使用NavLink而不是Link根据匹配的 URL 设置链接样式。请参阅NavLink 。根据文档，您必须为 activeClassName 提供任何值<NavLink>的支柱成分。

例如:

 <NavLink
  to="/faq"
  activeClassName="selected"
 >FAQs</NavLink>