1、普通跳转

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

export default function APage() {
  /**
   * 使用useNavigate钩子返回一个方法
   * 使用这个方法进行跳转
   */
  const navigate = useNavigate();

  const linlB = () => {
    // 直接跟我们定义的path
    navigate('/b')
  }

  return (
    <div>
      <div>A页面</div>
      <button onClick={() => linlB()}>跳转到B页面</button>
    </div>
  );
}

 　　2、替换当前页面

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

export default function APage() {
  /**
   * 使用useNavigate钩子返回一个方法
   * 使用这个方法进行跳转
   */
  const navigate = useNavigate();

  const replaceB = () => {
    // 直接跟我们定义的path
    navigate('/b', { replace: true })
  }

  return (
    <div>
      <div>A页面</div>
      <button onClick={() => replaceB()}>把当前页面替换成B页面</button>
    </div>
  );
}

 　　3、前进或后退到浏览器历史记录中的特定页面

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

  function handleBack() {
    // 后退几页
    navigate(-1);
  }

  function handleForward() {
    // 前进几页
    navigate(1);
  }

  return (
    <div>
      <button onClick={handleBack}>Back</button>
      <button onClick={handleForward}>Forward</button>
    </div>
  );
}