react-router - 使用带有 babel-plugin-react-css-modules 的 React Router v6

Question

是否有人将 React Router v6 与 CSS 模块（或更准确地说，与babel-plugin-react-css-modules）一起使用？

我不知道如何使用新语法为 NavLink 设置活动类。在 v6 之前，我可以重新映射activeStyleName到activeClassName模块的 Babel 配置中，仅此而已。在 v6 中，当我尝试使用styleNameon NavLink（正确扩展 TS 声明NavLinkProps）时，如下所示：

<NavLink styleName={({ isActive }) => (isActive ? 'active' : '')} to="/route">
  Route
</NavLink>

它失败并出现一些模糊的错误：

Uncaught TypeError: styleNameValue.split is not a function

有没有人让它工作？我能想到的唯一选择是 CSS 模块的命名导入并通过它引用它，className但它增加了很多冗长，我想避免。

UPD：目前，我正在通过NavLink迁移文档中所述的自定义组件对其进行管理：

import * as React from "react";
import { NavLink as BaseNavLink } from "react-router-dom";

const NavLink = React.forwardRef(
  ({ activeClassName, activeStyle, ...props }, ref) => {
    return (
      <BaseNavLink
        ref={ref}
        {...props}
        className={({ isActive }) =>
          [
            props.className,
            isActive ? activeClassName : null
          ]
            .filter(Boolean)
            .join(" ")
        }
        style={({ isActive }) => ({
          ...props.style,
          ...(isActive ? activeStyle : null)
        })}
      />
    );
  }
);

标签： react-routerbabel-plugin-react-css-modules