使用“react-router-dom”中的 useNavigate

React Router 是一个用于 React 应用程序的常用库，它允许您在 React 应用程序中管理多页面路由。其中，useNavigate 是 React Router v6 的一个新 Hook，它允许程序员从程序中进行编程式导航。

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

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

  const handleClick = () => {
    navigate('/dashboard/profile');
  };

  return (
    <div>
      <h1>Dashboard</h1>
      <button onClick={handleClick}>Go to Profile</button>
    </div>
  );
}

在上面的例子中，我们从react-router-dom中导入useNavigate hook。使用useNavigate hook，我们可以在组件中创建navigate 实例。然后，在handleClick函数中，我们使用navigate实例去导航到指定的URL。

请注意，navigate方法只有一个参数：一个相对路径字符串，用于指定要导航到的URL。它可以与所有 Link、Route 和Routes组件一起使用。

同时，useNavigate 还有一些其他常用的用法：

1. 通过 useNavigate().go(-1) 返回当前页面的上一页，相当于浏览器的后退操作。
2. 可以通过添加第二个参数的方式来进行 Navigation State 的操作。

const navigate = useNavigate();

const handleClick = () => {
  navigate('/dashboard/profile', {
    state: { fromDashboard: true }
  });
};

在上面的代码中，我们通过它的第二个参数，添加了一个 state 对象。state 对象带有任意的 JSON 数据，它会附加到最新的页面访问对象中。这通常用于跨页面传递数据。

总的来说，useNavigate 是 React Router 中的一个非常有用的 Hook，可以帮助程序员使用编程式导航，从而更轻松地管理多页面路由。