react v6 编程式导航

在React中，编程式导航通常是指使用JavaScript代码来控制路由的跳转，而不是依赖于用户的点击操作。在React Router v6中，可以使用useNavigate钩子来实现编程式导航。

以下是一个简单的例子：

首先，确保你已经安装了React Router v6：

npm install react-router-dom

然后，你可以在你的组件中使用useNavigate钩子来实现编程式导航：

import { useNavigate } from 'react-router-dom';
 
function MyComponent() {
  const navigate = useNavigate();
 
  // 当需要导航到一个新的路径时，调用此函数
  function handleNavigation() {
    navigate('/new-path');
  }
 
  return (
    <div>
      <button onClick={handleNavigation}>导航到新路径</button>
    </div>
  );
}

在上面的代码中，useNavigate钩子用于获取导航函数，然后你可以在任何事件处理函数中（如按钮点击事件处理函数）调用navigate函数来实现导航。

navigate函数可以接受一个字符串作为参数，指定要导航到的路径，也可以接受一个对象作为参数，指定额外的选项，例如state传递、replace页面记录的处理等。