为什么react不允许我在html列表项中使用路由器dom链接?

<li className="nav-item">
  <Link to={'/cart'}>
    <i
      className="fa fa-shopping-bag"
      style={{fontSize: "22px"}}></i>
  </Link>
</li>

错误:

index.tsx:19 Uncaught Error: useHref() may be used only in the context of a <Router> component.