使用React Router的NavLink设置激活样式时Home链接同步被激活如何解决

NavLink默认采用前缀匹配规则：只要当前页面路径以to属性指定的路径为前缀，就会判定为匹配，自动添加激活样式。
你给Home导航设置的路径是/，所有站点路径都以/开头，因此访问/contact、/about这类子路径时，Home的NavLink也会被判定为匹配，同时触发激活样式。

给指向根路径的Home对应的NavLink组件添加exact属性，开启严格完全匹配规则，只有当页面路径完全等于/时，才会触发Home的激活样式。

修改后的src/components/Header.js代码如下：

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

const Header = () => {
  return (
    <nav>
      <ul>
        <li>
          {/* 新增exact属性开启完全匹配 */}
          <NavLink to="/" activeClassName="selected" exact>
            Home
          </NavLink>
        </li>
        <li>
          <NavLink to="/about" activeClassName="selected">
            About
          </NavLink>
        </li>
        <li>
          <NavLink to="/contact" activeClassName="selected">
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
};

export default Header;

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