在React中，如何正确地以编程方式导航到新路由/页面？

npm install react-router-dom

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

const navigate = useNavigate();

const goToPage = () => {
  navigate('/target-route');
};

<button onClick={goToPage}>Go to target page</button>

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

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

  const goToPage = () => {
    navigate('/target-route');
  };

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

export default MyComponent;