React Router 6.4：useHref()需在<Router>组件上下文使用的问题求解

问题原因 #

你的代码中，包含导航链接（推测items1里用到了React Router的<Link>组件）的<Menu>渲染在<RouterProvider>外层，不在React Router的上下文范围内，导致<Link>内部调用useHref时找不到Router实例，触发错误。

解决方案 #

将整个App组件纳入React Router的上下文即可，具体操作是调整路由配置，把App作为根路由的element，让<RouterProvider>包裹整个应用：

import { createBrowserRouter, createRoutesFromElements, Route, Outlet, RouterProvider, Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';

const { Header, Content } = Layout;

// 页面组件
function Test() {
  return <div>首页</div>;
}

function Test2() {
  return <div>仪表盘</div>;
}

// 应用布局组件
function App() {
  // 示例导航项（包含Link组件）
  const items1 = [
    { key: '1', label: <Link to="/">首页</Link> },
    { key: '2', label: <Link to="/dashboard">仪表盘</Link> },
  ];

  return (
    <Layout style={{ height: "100%" }}>
      <Header className="header">
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={["2"]} items={items1} />
      </Header>
      <Layout>
        <Content
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
          }}
        >
          {/* 用Outlet渲染子路由内容 */}
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
}

// 配置嵌套路由，将App作为根路由载体
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />}>
      {/* index路由对应根路径的默认页面 */}
      <Route index element={<Test />} />
      <Route path="dashboard" element={<Test2 />} />
    </Route>
  )
);

// 渲染整个应用
ReactDOM.createRoot(document.getElementById('root')).render(
  <RouterProvider router={router} />
);

说明 #

• 调整后，App组件作为根路由的载体，整个应用（包括Header里的Menu）都处于<RouterProvider>提供的上下文之中，<Link>组件就能正常调用useHref方法。
• 用<Outlet>组件渲染子路由内容，这是React Router 6+嵌套路由的标准用法，替代了原代码中仅在Content区域放置<RouterProvider>的写法。

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