Question

我正在使用react路由器3进行路由。我试图开发一个通用标签，但我不知道如何检查链接是否有效，所以我可以将类名传递给＆＃39;选择＆＃39;。

这是我的代码

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 ：

您可以使用activeClassName组件的道具<Link>。请参阅docs。

例如：

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

v4 ：

您需要使用NavLink代替Link来根据匹配的网址设置链接的样式。见NavLink。根据文档，您必须为activeClassName组件的<NavLink>道具提供任何值。

例如：

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

风格反应路由器活动链接

1 个答案: