useNavigate

useNavigate 是 React Router 库中的一个 Hook，它使得在 React 函数组件中进行编程式导航变得简单。通过 useNavigate，你可以在不使用 <Link> 组件的情况下，直接在组件内部触发页面跳转。

以下是关于 useNavigate 的详细解释和用法：

引入 useNavigate

首先，你需要从 react-router-dom 包中引入 useNavigate。

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

在组件中使用 useNavigate

在 React 函数组件中，你可以通过调用 useNavigate 来获取一个 navigate 函数。然后，你可以在任何需要导航的地方调用这个函数，并传递要跳转的路径。

function MyComponent() {  
  const navigate = useNavigate();  
  
  const handleClick = () => {  
    navigate('/new-route'); // 跳转到 /new-route 路径  
  };  
  
  return (  
    <div>  
      <button onClick={handleClick}>Go to new route</button>  
    </div>  
  );  
}

传递参数

你还可以使用 navigate 函数的第二个参数来传递额外的导航选项，比如状态或替换当前历史记录条目的选项。例如，你可以通过 state 属性传递一些参数给目标路由。

function MyComponent() {  
  const navigate = useNavigate();  
  
  const handleClick = () => {  
    navigate('/target-route', {  
      state: { param1: 'value1', param2: 'value2' },  
    });  
  };  
  
  return (  
    <div>  
      <button onClick={handleClick}>跳转到目标路由</button>  
    </div>  
  );  
}

在目标路由的组件中，你可以通过 useLocation Hook 的 state 属性来访问这些传递的参数。

注意事项

• 确保你的路由配置能够正确地匹配传递的参数，以便能够正确地渲染目标路由。
• 在使用 navigate 进行编程式导航时，注意避免在组件的渲染过程中进行导航，因为这可能会导致不必要的渲染循环。
• React Router 的不同版本之间可能存在一些差异。