Unfortunately, the DOMRouteOpts interface is not available for export.
interface DOMRouterOpts {
basename?: string;
future?: Partial<Omit<RouterFutureConfig, "v7_prependBasename">>;
hydrationData?: HydrationState;
unstable_dataStrategy?: unstable_DataStrategyFunction;
window?: Window;
}
If you require access to this interface, you can manually define it in your code:
import type {
unstable_DataStrategyFunction,
FutureConfig as RouterFutureConfig,
HydrationState,
} from '@remix-router';
export interface DOMRouterOpts {
basename?: string;
future?: Partial<Omit<RouterFutureConfig, "v7_prependBasename">>;
hydrationData?: HydrationState;
unstable_dataStrategy?: unstable_DataStrategyFunction;
window?: Window;
}
import {
createBrowserRouter,
createRoutesFromElements,
Route,
} from "react-router-dom";
import type { RouteObject } from "react-router-dom";
import type { Router as RemixRouter } from '@remix-router';
import type { DOMRouterOpts } from "@types/DOMRouterOpts";
import Root from "@src/routes/Root";
import Home from "@src/routes/Home";
const routes: RouteObject[] = createRoutesFromElements(
<Route path="/" element={<Root />}>
<Route index element={<Home />} />
</Route>
);
const opts: DOMRouterOpts = {
// ... specify any options required ...
};
export const router: RemixRouter = createBrowserRouter(routes, opts);
It might be unnecessary complexity since the functions are in Typescript and understand what they return and take. The route options should simply mimic the structure of DOMRouterOpts. A simplified version could work just as effectively:
import {
createBrowserRouter,
createRoutesFromElements,
Route,
} from "react-router-dom";
import Root from "@src/routes/Root";
import Home from "@src/routes/Home";
const routes = createRoutesFromElements(
<Route path="/" element={<Root />}>
<Route index element={<Home />} />
</Route>
);
const opts = {
// ... specify any options required that align with `createBrowserRouter` ...
};
export const router = createBrowserRouter(routes, opts);