Typescript 接口DOMRouter选项未输出

发布于05月06日

当我try 在React项目中使用react-router-dom:6.22.3和TypScript时，我面临import type个问题

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找不到接口DOMRouterOpts和类型Router(从函数createBrowserRouter返回的类型).

我try 从npm安装@types/react-router-dom，但最新版本是5.3.3，这不适用于我当前的版本6.22.3.

有人知道如何解决这个问题吗？

推荐答案

DOMRouteOpts interface不出口.

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

如果您明确需要，您可以自己定义接口:

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);

尽管这一切可能都有些矫枉过正，因为createRoutesFromElements和createBrowserRouter是用Typescript编写的，并且知道它们返回和消费的内容.路由选项basically只需要是与DOMRouterOpts的形状匹配的对象.以下内容可能也适合您.

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);