react-router-dom v6中useNavigate钩子失效问题求助

你的问题出在直接在组件顶层渲染逻辑中调用navigate函数。这种写法会在组件每次渲染时同步触发导航，但受限于React的渲染机制，这类渲染阶段的导航操作不会生效，甚至可能引发无限渲染循环。

正确的使用方式 #

方式一：组件挂载后自动导航（比如页面重定向） #

使用useEffect钩子包裹导航逻辑，确保只在组件挂载完成后执行一次：

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

function Home() {
  const navigate = useNavigate();
  
  useEffect(() => {
    // 组件挂载后执行导航
    navigate('/dashboard');
  }, [navigate]);
}

方式二：用户交互时触发导航 #

将navigate放在点击、输入等用户交互事件的处理函数中：

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

function Home() {
  const navigate = useNavigate();
  
  const goToDashboard = () => {
    navigate('/dashboard');
  };
  
  return (
    <button onClick={goToDashboard}>进入仪表盘</button>
  );
}

关键说明 #

React Router的useNavigate返回的导航函数，必须在副作用（useEffect）或用户交互事件中调用，不能直接放在组件的顶层代码里——渲染阶段的同步操作会干扰React的渲染流程，导致导航无法正常触发。

内容的提问来源于stack exchange，提问作者Bharat Soni