javascript - 路由器 6.4 : useHref() may be used only in the context of a <Router> component

Question

这不是 this 的副本因为那里的答案没有说明如何使用 router 6.4(即使用 createBrowserRouter 和 createRoutesFromElements)执行此操作。 也不确定组件布局是否相似。

---

这是我的代码:

const router = createBrowserRouter(
  createRoutesFromElements(
    <React.Fragment>
      <Route path="/" element={<Test />} />
      <Route path="dashboard" element={<Test2 />} />
    </React.Fragment>
  )
);

const { Header, Content, Sider } = Layout;
function App() {
  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,
          }}
        >
          <RouterProvider router={router} />
        </Content>
      </Layout>
    </Layout>
  );
}

我遇到了错误

useHref() may be used only in the context of a component

我知道这与我的 Links 没有嵌入在 Router 中有关，但是使用这个 6.4 react router 的新 API 我该如何解决这个问题？

Answer 1

即使使用新的 RRDv6.4 数据 API 和数据路由器，Link 组件仍然需要在路由上下文中呈现。您可以将所有 App 组件布局移动为创建路由器时配置的布局路由。

例子:

const { Header, Content, Sider } = Layout;

const AppLayout = () => (
  <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 />
      </Content>
    </Layout>
  </Layout>
);

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<AppLayout />}>
      <Route path="/" element={<Test />} />
      <Route path="dashboard" element={<Test2 />} />
    </Route>
  )
);

...

function App() {
  return (
    <RouterProvider router={router} />
  );
}