我制作了 React Router 应用。但出现错误。我无法识别它。我是 React 新手开发人员。

我的应用代码是：

export default function App() {
  return (
    <BrowserRouter className='bodyMy'>
      <HeardTitle />
      <Navbar />
      <Switch>
        <Route exact path="/" component={Card} />
        <Route exact path="/class" component={Card2} />
      
      </Switch>
      
      
    </BrowserRouter>
  );
}

以及我的导航栏代码：

export default function navbar() {
    return (
        <Fragment className='myNavbar'>
            <ul>
                <li >
                    <NavLink activeStyle={{ color:'green', fontWeight: "bold" }} exact to="/">Function</NavLink>
                </li>
                <li >
                    <NavLink  activeStyle={{ color:'red', fontWeight: "bold" }} exact to="/class">Class</NavLink>
                </li>
                <li >
                    <NavLink href="#pricing">Logout</NavLink>
                </li>
            </ul>
        </Fragment>
    )
}

它显示 TypeError：无法读取未定义的属性“pathname”