react useNavigate()打开新的页面

在 React 中使用 `useNavigate()` 可以让你在不需要刷新页面的情况下在单页应用中导航到新的页面。

首先，你需要安装并导入 `react-router-dom` 库。然后，在你的组件中使用 `useNavigate()` 钩子来获取 `navigate` 函数。然后，当你想要导航到新页面时，调用 `navigate()` 函数并传递新页面的路径。

以下是一个示例代码：

import { useNavigate } from "react-router-dom";

function MyComponent() {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    navigate("/new-page");
  };

  return (
    <div>
      <button onClick={handleButtonClick}>Go to new page</button>
    </div>
  );
}

在上面的示例中，当用户点击按钮时，会触发 `handleButtonClick()` 函数，该函数调用 `navigate()` 函数并传递新页面的路径 `"/new-page"`。然后，React Router 会将用户导航到新页面，而不需要刷新整个页面。

注意，在使用 `useNavigate()` 钩子之前，你需要确保你的组件被包裹在 `Router` 组件中，例如：

import { BrowserRouter as Router, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Route path="/" exact component={HomePage} />
      <Route path="/new-page" component={NewPage} />
    </Router>
  );
}

在上面的例子中，我们创建了一个 `Router` 组件，并在其中定义了两个路由：一个是 `/`，对应 `HomePage` 组件，另一个是 `/new-page`，对应 `NewPage` 组件。