React Router v6兼容v5 NavLink的类型化包装器实现方案

使用 react-router v6 开发时，若需要配合 styled-components 通过 activeClassName 配置导航激活态样式，会发现 v6 版本原生 NavLink 无法直接支持该能力，需要封装兼容 v5 版本 NavLink 语法的类型化包装器。
经实测，不添加该封装层时，无法直接通过 styled-components 给 v6 版本 NavLink 配置激活态类名样式，可直接复用的实现代码如下：

import React, { CSSProperties } from 'react'
import { NavLink as BaseNavLink, NavLinkProps } from 'react-router-dom'

/**
 * react-router v6 NavLink 包装组件，保留 v5 版本的使用能力
 * 封装原因：styled-components 无法直接适配 v6 NavLink 基于 isActive 状态的函数式传参逻辑，
 * 不能直接识别激活态类名完成样式定制
 */

type NavLinkWrapperProps = NavLinkProps & {
  activeClassName?: string
  activeStyle?: CSSProperties
}

export const NavLink = ({ activeClassName, activeStyle, ...props }: NavLinkWrapperProps) => {
  return (
    <BaseNavLink
      {...props}
      className={({ isActive }) => [props.className, isActive ? activeClassName : null].filter(Boolean).join(' ')}
      style={({ isActive }) => ({
        ...props.style,
        ...(isActive ? activeStyle : null),
      })}
    />
  )
}

使用时直接将业务代码中从 react-router-dom 导入的 NavLink 替换为该封装组件即可，原有 v5 版本的 activeClassName、activeStyle 写法无需额外改造。

内容的提问来源于stack exchange，提问作者Mylo Warden