详解React中常见的三种路由处理方式选择

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

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

  const handleButtonClick = () => {
    // 在按钮点击时导航到 /other-route
    navigate('/other-route');
  };

  return (
    <button onClick={handleButtonClick}>点击导航到其他路由</button>
  );
}

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

function MyComponent() {
  const history = useHistory();

  const handleButtonClick = () => {
    // 在按钮点击时以 push 的方式导航到 /other-route
    history.push('/other-route');
  };

  return (
    <button onClick={handleButtonClick}>点击以 push 方式导航到其他路由</button>
  );
}

import React from 'react';

function MyComponent() {
  const handleOpenNewWindow = () => {
    // 打开一个新的浏览器窗口
    window.open('/new-page', '_blank');
  };

  const handleModifyLocation = () => {
    // 修改浏览器地址栏
    window.location.href = '/modified-page';
  };

  return (
    <div>
      <button onClick={handleOpenNewWindow}>在新窗口中打开页面</button>
      <button onClick={handleModifyLocation}>修改浏览器地址栏</button>
    </div>
  );
}

export default MyComponent;