React RouterV6 设置＜Link＞的激活状态（React does not recognize the `activeStyle` prop的解决方法）

需求

如图，需要在当前页面时，当前页面的导航颜色变为黄色

问题

在V6版本以下，Link标签会有activeStyle属性或者activeClassName属性，这两个属性都可以设置router激活状态时Link的样式，即当前页面为Link所指页面时Link的样式。

但是，在V6中，使用这两个属性会出现报错如图，会提示找不到该方法。

提示说可以把其中的大写改成小写，但是这个方法是错误的，并不能达到我们想要的效果。

解决

在V6中，已经删除了activeStyle属性以及activeClassName属性。官方给出了正确的向Link标签添加激活样式方法，可戳：custom-link-example

关键部分如下：

function CustomLink({ children, to, ...props }: LinkProps) {
  let resolved = useResolvedPath(to);
  let match = useMatch({ path: resolved.pathname, end: true });

  return (
    <div>
      <Link
        style={{ textDecoration: match ? "underline" : "none" }}
        to={to}
        {...props}
      >
        {children}
      </Link>
      {match && " (active)"}
    </div>
  );
}

实际上就是自定义了一个函数CustomLink，然后通过useResolvedPath和useMatch去引入路径并判断当前页是否是该路径，若是，则match为true，相应的textDecoration赋上了 "underline"值；否则，textDecoration为“none”。

在我的项目中，我将官方代码稍作修改即可

import './css/style.css'
import sdulogo from "./img/sdulogo.png";
import * as React from "react";
import {
    Link,
    useMatch,
    useResolvedPath,
} from "react-router-dom";

export default function Header() {
    return(
        <header id="header">
           ...
                <nav id="navbar" className="navbar">
                    <ul>
                        {/*这里将Link改为CustomLink，其余不变*/}
                        <li><CustomLink to="/">首页</CustomLink></li>
                        <li><CustomLink to="/canvas">描摹</CustomLink></li>
                    </ul>
                </nav>
           ...
        </header>
    )
}

function CustomLink({ children, to, ...props }) {
    let resolved = useResolvedPath(to);
    let match = useMatch({ path: resolved.pathname, end: true });
    return (
        <div>
            {/*若当前为激活状态，则link颜色为黄色，否则不设置颜色*/}
            <Link
                style={{ color: match ? "#ffc107" : "" }}
                to={to}
                {...props}
            >
                {children}
            </Link>
        </div>
    );
}

要注意几点：

1. 在IDE中引用useResolvedPath和useMatch可能会有灰线提示：“Cannot resolve symbol ‘useMatch’”，不过不会影响实际运行
2. 官方给的代码是TypeScript，我这里写的是JavaScript，没有太大的区别。主要是CustomLink函数的参数从{ children, to, ...props }: LinkProps改成{ children, to, ...props },且不需导入LinkProps。这其实是因为TypeScript的函数传递的参数需要指明参数的类型，也就是{ children, to, ...props }都是LinkProps类型的。