Css React路由器NavLink和activeClassName出现问题

我的第一个问题是，我的菜单中有三个链接。家里，大约和添加食物。NavLink activeClassName按预期工作，除了：Home始终保持活动状态，即使我移动到其他链接。 在屏幕截图中，我已转到/关于页面，但Home*li保持活动状态。

其次，由于某些原因，边界半径对这些项不起作用。是因为他们有大量的填充物吗

我的代码：

   import React from "react";
import { NavLink } from "react-router-dom";
const Navbar = (props) => {
  return (
    <nav>
      <ul>
        <NavLink to="/" activeClassName="active-navlink">
          <li>Home</li>
        </NavLink>
        <NavLink to="/about" activeClassName="active-navlink">
          <li>About</li>
        </NavLink>
        <NavLink to="/add-food" activeClassName="active-navlink">
          <li>Add Food</li>
        </NavLink>{" "}
      </ul>
    </nav>
  );
};

export default Navbar;

从“React”导入React；
从“react router dom”导入{NavLink}；
常量导航栏=（道具）=>{
返回(

家
关于
添加食物
{" "}

);
};
导出默认导航栏；

还有我的路由器，所有链接都在这里处理：

<Router>
      {" "}
      <div className="App">
        <Navbar></Navbar>
        <Switch>
          <Route path="/about" component={About}></Route>
          <Route
            path="/products/:food"
            render={(props) => (
              <IndividualProduct {...props}></IndividualProduct>
            )}
          ></Route>
          <Route
            path="/"
            exact
            render={(props) => (
              <Home
                {...props}
                groceryList={groceryList}
                orderTotal={orderTotal}
                setOrderTotal={setOrderTotal}
                productsInCart={productsInCart}
                updateProductsInCart={updateProductsInCart}
              ></Home>
            )}
          ></Route>
          <Route component={NotFound}></Route>
        </Switch>
      </div>
    </Router>

{" "}
(
)}
>
(
)}
>

1。 将“/”的精确链接添加到导航链接：

  <NavLink to="/" activeClassName="active-navlink" exact={true}  >
        <li>Home</li>
  </NavLink>

家

样式示例：

1。 将“/”的精确链接添加到导航链接：

  <NavLink to="/" activeClassName="active-navlink" exact={true}  >
        <li>Home</li>
  </NavLink>

家

样式示例：