Uncaught Error: useNavigate() may be used only in the context of a ＜Router＞ component.

出现此问题的原因是因为使用useNavigate的模块没有被react的路由所包围，导致路由并不能在这个层面上使用，解决办法有两种：

一、将这个模块被路由模块包围

export default memo(() => {
  return (
    <Layout>
      <Router>
        <Routes>
          <Route path="/" exact element={<Home foo={1000} />}></Route>
          <Route path="/content/:id" element={<Content />}></Route>
        </Routes>
      </Router>
    </Layout>
  );
});

例如本代码中的组件，现在是无法使用useNavigate的，如果不破坏结构的话，你要做的应该是将这个路由结构放到路由里面，也就是

<Router>
  <Layout />
</Router>

这样你就可以自由的使用useNavigate等hook了。

二、使用原生的window对象

说起window对象肯定不陌生。
如果想在路由外面实现跳转，还有这个最原始的方法，虽然不是路由内的跳转，但是一样可以实现这些功能，不妨试试。
如果无法使用的useNavigate的时候，可以直接使用window.open方法

window.open(href, '_self')

我想大多数人都知道这个吧，一样可以实现跳转，而且很好用。如果你也遇到了同样的问题，试试这个吧。