interface DOMRouterOpts not exported

Question

I am facing import type issue when trying to use react-router-dom:6.22.3 with TypeScript in React project

import { Route, createBrowserRouter, createRoutesFromElements } from "react-router-dom";
import type { RouteObject } from "react-router-dom";
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 =

export const router: Router = createBrowserRouter(routes, opts);

VSCode couldn't find the interface DOMRouterOpts and type Router (type returned from function createBrowserRouter).

I tried to install @types/react-router-dom from npm but the latest version is 5.3.3 which is not applicable for my current version 6.22.3.

Does anyone know how to fix this problem?

Answer 1

The DOMRouteOpts interface is not exported.

interface DOMRouterOpts {
  basename?: string;
  future?: Partial<Omit<RouterFutureConfig, "v7_prependBasename">>;
  hydrationData?: HydrationState;
  unstable_dataStrategy?: unstable_DataStrategyFunction;
  window?: Window;
}

You can just define the interface yourself if you explicitly need it:

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 = {
  // ... whatever options you are trying to specify ...
};

export const router: RemixRouter = createBrowserRouter(routes, opts);

This may all be overkill though as createRoutesFromElements and createBrowserRouter are written in Typescript and know what they return and consume. The route options basically just needs to be an object that matches the shape of DOMRouterOpts. The follow will likely work just as well for you.

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 = {
  // ... whatever options you are trying to specify that
  // match what `createBrowserRouter` accepts ...
};

export const router = createBrowserRouter(routes, opts);