react-router-dom v6.12.0中useNavigate报错及导航按钮失效求助

问题1：useNavigate() 只能在 <Router> 上下文使用 #

原因：Header 组件渲染在 TheLayout 内部，但 BrowserRouter 被嵌套在 TheLayout 的子节点中，导致 Header 处于路由上下文之外，无法调用 useNavigate。

修复方法：
将 BrowserRouter 移到 TheLayout 外层，让所有需要路由上下文的组件都处于 Router 包裹范围内：

import 'antd/dist/antd';
import { ConfigProvider } from "antd";
import './App.css';
import TheLayout from "./containers/TheLayout";
import { Suspense } from "react";
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import routes from './router/routes';

function App() {
  return (
      <div className="App">
        <ConfigProvider
             theme={{token: {
                colorPrimary: "#3b2eed"
              }}}
        >
          <BrowserRouter>
            <TheLayout>
                <Suspense fallback={<div>加载中...</div>}>
                    <Routes>
                        {routes.map(route => {
                            return <Route
                                key={route.path}
                                path={route.path}
                                name={route.name}
                                element={route.element}
                            />
                        })}
                    </Routes>
                </Suspense>
            </TheLayout>
          </BrowserRouter>
        </ConfigProvider>
      </div>
  );
}

export default App;

问题2：Merchant按钮点击无响应 #

原因：

1. Antd Menu 的 items 配置错误，path 字段并非用于放置 <Link> 组件；
2. handleMenuClick 中用 navigate(key)，但 key 设为 "merchant"，与实际路由路径 "/merchant" 不匹配；
3. 同时使用 <Link> 和手动 navigate 导致逻辑冲突。

修复方法：
直接将 items 的 key 设置为完整路由路径，通过 navigate 实现导航：

import React from "react";
import "./css/header.css";
import { Menu } from "antd";
import { useNavigate } from "react-router-dom";

const items = [
  { label: "Merchants", key: "/merchant" },
  { label: "Customers", key: "/customer" },
];

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

  const handleMenuClick = ({ key }) => {
    navigate(key);
  };

  return (
    <div className="cc-nav">
      <div className="cc-nav-body">
        <Menu
          defaultSelectedKeys={["/merchant"]}
          mode="horizontal" 
          items={items}
          onClick={handleMenuClick}
        />
      </div>
    </div>
  );
};

export default Header;

也可以直接用 <Link> 替代手动导航（无需 useNavigate）：

import React from "react";
import "./css/header.css";
import { Menu } from "antd";
import { Link } from "react-router-dom";

const items = [
  { label: <Link to="/merchant">Merchants</Link>, key: "/merchant" },
  { label: <Link to="/customer">Customers</Link>, key: "/customer" },
];

const Header = () => {
  return (
    <div className="cc-nav">
      <div className="cc-nav-body">
        <Menu
          defaultSelectedKeys={["/merchant"]}
          mode="horizontal" 
          items={items}
        />
      </div>
    </div>
  );
};

export default Header;

问题3：添加返回按钮后组件消失 #

原因：返回按钮组件未处于 Router 上下文内，或调用 navigate(-1) 时无历史记录可返回。

正确实现返回按钮：
确保组件在 BrowserRouter 范围内，再使用 useNavigate：

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

const BackButton = () => {
  const navigate = useNavigate();
  
  const goBack = () => {
    // 无历史记录时跳转首页，避免空白
    const canGoBack = window.history.length > 1;
    canGoBack ? navigate(-1) : navigate("/");
  };

  return <button onClick={goBack}>返回上一页</button>;
};

内容的提问来源于stack exchange，提问作者Jaloliddin Nomozov