react-router-dom v6编程式导航：useNavigate使用及失效问题咨询

你的代码问题排查 #

你的NavigationExample组件代码本身写法没问题，点击按钮没跳转大概率是路由上下文配置缺失——useNavigate必须在BrowserRouter（或其他Router组件）提供的上下文环境中使用，否则无法生效。

正确的路由配置示例 #

确保你的根组件（比如App.js）用BrowserRouter包裹所有路由和页面组件：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import NavigationExample from './NavigationExample';
import About from './About'; // 你的About页面组件

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<NavigationExample />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

useNavigate 正确用法 #

1. 基础跳转：直接传入目标路由路径

   navigate('/about');
   

2. 回退/前进页面：传入数字控制历史记录栈

   navigate(-1); // 后退一页
   navigate(1);  // 前进一页
   

3. 替换当前历史记录：避免回退到当前页面（比如登录后跳转）

   navigate('/dashboard', { replace: true });
   

4. 传递页面状态：跳转时携带额外数据，通过useLocation获取

   // 跳转时传状态
   navigate('/user', { state: { userId: 123, userName: 'Alice' } });
   
   // 目标页面获取状态
   import { useLocation } from 'react-router-dom';
   const location = useLocation();
   console.log(location.state); // { userId: 123, userName: 'Alice' }
   

最佳实践 #

• 仅在路由上下文内使用：useNavigate只能在被Router包裹的组件/自定义Hook中调用，不要在普通工具函数里直接调用，如需在工具函数中使用，可将navigate作为参数传入。
• 表单提交后跳转：先完成表单逻辑（如API请求、表单校验），再执行跳转，避免异步操作未完成就跳转：

  const handleSubmit = async (e) => {
    e.preventDefault();
    await submitFormData(formData); // 先处理表单提交
    navigate('/success'); // 再跳转
  };
  

• 嵌套路由用相对路径：在嵌套路由组件中，使用相对路径更灵活，比如从/user/123跳转到/user/123/edit：

  navigate('./edit'); // 等价于 navigate('/user/123/edit')
  

• 权限校验前置：跳转前先做权限判断，不符合条件则阻止跳转或重定向：

  const handleAdminPage = () => {
    if (!isLoggedIn) {
      navigate('/login');
      return;
    }
    navigate('/admin');
  };
  

常见陷阱 #

• 忘记包裹Router组件：这是最常见的问题，所有使用路由Hook的组件必须在BrowserRouter/HashRouter内部。
• useEffect中无限跳转：未加条件判断会导致组件渲染时反复跳转，需添加依赖和条件：

  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/login');
    }
  }, [isAuthenticated, navigate]); // 依赖项不能少
  

• 状态数据丢失：通过state传递的数据不会存在URL中，页面刷新后会丢失，需要持久化的数据建议放在URL参数或localStorage中。
• 未配置NotFound路由：如果跳转的路由不存在，需配置兜底路由避免白屏：

  <Route path="*" element={<NotFoundPage />} />
  

内容的提问来源于stack exchange，提问作者22CB006