Router Provider & React Router createBrowserRouter

[writes-of-spring]

I'm attempting to use the new useHref options in the router provider combined with the React routers createBrowserRouter setup, so there's no component to nest the RouterProvider inside of.

I've tried following the pattern suggested in the Remix section of the docs, where it says to either add the provider per page or to add it to the root route, and adding to the root route of it doesn't seem to work as expected (however wrapping page inside does)

Has anyone else gotten it to work at the root route layout with the createBrowserRouter

const routes = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,

    children: [
      {
        index: true,
        element: <h1>Something new will live here</h1>,
      },]
]}

// Layout Component
export default function Layout() {
  const navigate = useNavigate();

  return (
    <RouterProvider navigate={navigate} useHref={useHref}>
      <div>
        <TopBarNavigation />

        <div className="mx-auto max-w-screen-xl">
          <main className="px-4 py-10 sm:px-6 lg:px-8">
            <Outlet />
          </main>
        </div>
      </div>
    </RouterProvider>
  );
}

the following component is a child of the root layout in the above
and will link to /{farmId} rather than farms/{farmId} as expected

wrapping the component in a RouterProvider addresses the issue.

const ListFarms = () => {
  const params = useParams();
  return (

    <nav className="flex flex-col gap-2">
      <LinkButton aria-label="create new farm" size="sm" href="/farms/create">
        Create Farm
      </LinkButton>
      <SearchField
        aria-label="Search farms"
        placeholder="Search farms..."
        className={"mx-1 my-1 w-full"}
        slot="filter"
        value={searchTerm}
        onChange={(term) => setSearchTerm(term)}
      />
      <ListBox
        renderEmptyState={() => <Text>No farms found</Text>}
        selectedKeys={params.id ? [params.id] : []}
        items={filteredFarms}
        className={"rounded-none border-none outline-none"}
        selectionMode="single"
      >
        {(farm) => (
          <ListBoxItem
            href={`${farm.id}`} 
            id={farm.id}
            key={farm.id}
            textValue={`${farm.farmName} - ${farm.membershipNumber}`}
          >
            <div className="flex flex-col">
              <Text slot="label">{farm.farmName}</Text>
              <Text slot="description">{farm.membershipNumber}</Text>
            </div>
          </ListBoxItem>
        )}
      </ListBox>
    </nav>

  );
};

thanks!