TypeScript 中基於配置的 React Router 拋出 eslint 錯誤

Question

好的，當我瀏覽 React Router 的文檔時， 我看到建議是使用支持標准數據歷史記錄 Web API的新路由器，這些 API 相對較新。

我在瀏覽器中，所以我將使用createBrowserRouter 。

JavaScript 中有一些示例代碼。我需要將其移植到 TypeScript 以用於我的項目。

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

import Root, { rootLoader } from "./routes/root";
import Team, { teamLoader } from "./routes/team";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

當我這樣做時，我有錯誤。

我嘗試刪除大部分我認為不需要的東西，比如裝載機等。

這是我的第一個剪輯：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import type { BrowserRouter } from 'react-router-dom';
import AnItem from './components/Shared/AnItem';

const myRouter: BrowserRouter = createBrowserRouter([
    {
        path: '/',
        element: <AnItem />,
    },
]);

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <RouterProvider router={myRouter} />
    </React.StrictMode>
);

在那里，我得到了許多關於any值的問題，從以下行開始：

const myRouter: BrowserRouter = createBrowserRouter([

僅針對該行報告了三個錯誤（我將在下面的屏幕截圖中全部包含它們）：

• any值的不安全賦值。
• “BrowserRouter”指的是一個值，但在這里用作類型。 您指的是 'typeof BrowserRouter' 嗎?
• any類型值的不安全調用。

那里出了什么問題？ 我輸入myRouter 。 我知道數組對於createBrowserRouter是無類型的，但我認為它可以推斷。

但是讓我們把它拉出來並強類型化那個數組。

import React from 'react';
import ReactDOM from 'react-dom/client';
import type { RouteObject } from 'react-router';
import type { BrowserRouter } from 'react-router-dom';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import AnItem from './components/Shared/AnItem';

const routes: RouteObject[] = [
    {
        path: '/',
        element: <AnItem />,
    },
];

const myRouter: BrowserRouter = createBrowserRouter(routes);

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <RouterProvider router={myRouter} />
    </React.StrictMode>
);

現在它很高興通過routes ，但仍然對我大喊大叫......

const myRouter: BrowserRouter = createBrowserRouter(routes);

any值的不安全賦值。

any在哪里？ 它是以某種方式來自createBrowserRouter的嗎？ 如果我將鼠標懸停在 VS Code 中，我會得到“intellisense”（如果這仍然是它的名稱），所以我認為我的類型等都正確映射：

(alias) createBrowserRouter(routes: RouteObject[], opts?: {
    basename?: string | undefined;
    hydrationData?: Partial<Pick<RouterState, "loaderData" | "actionData" | "errors">> | undefined;
    window?: Window | undefined;
} | undefined): Router
import createBrowserRouter

這很清楚地說明它返回一個Router 。

看起來它無法從type BrowserRouter = /*unresolved*/ any中找出BrowserRouter是什么。 但是當我將鼠標懸停在導入上時，我得到：

(alias) function BrowserRouter({ basename, children, window, }: BrowserRouterProps): JSX.Element
import BrowserRouter
A <Router> for use in web browsers. Provides the cleanest URLs.

'BrowserRouter' is declared but its value is never read.ts(6133)

所以這在上下文中似乎也是如此，盡管“它的價值永遠不會被讀取”是令人驚訝的。

現在我確實嘗試將myRouter鍵入為Router ，但有人大喊我應該使用更具體類型的路由器：

注意：您通常不會直接渲染 [sic]。 相反，您將渲染一個更特定於您的環境的路由器，例如 web 瀏覽器或用於服務器渲染的路由器。

所以我正在使用BrowserRouter 。 但它的錯誤是：

“BrowserRouter”指的是一個值，但在這里用作類型。 您指的是 'typeof BrowserRouter' 嗎?

我很確定我不是指typeof ； 我將變量定義為特定類型。

我在這里錯過了什么？ 我很難用谷歌搜索一個例子，它都使用配置而不是組件進行路由（我認為配置是我想要的，因為新的數據歷史 API 路由器需要它）並且在 TypeScript 中。

看起來德魯在做某事。 這是我來自 package.json 的依賴項：

    "dependencies": {
        "bootstrap": "^5.2.3",
        "react": "^18.2.0",
        "react-bootstrap": "^2.7.0",
        "react-dom": "^18.2.0",
        "react-router": "^6.7.0",
        "react-router-dom": "^6.7.0"
    },
    "devDependencies": {
        "@types/react": "^18.0.26",
        "@types/react-dom": "^18.0.9",
        "@typescript-eslint/eslint-plugin": "^5.48.2",
        "@typescript-eslint/parser": "^5.48.2",
        "@vitejs/plugin-react-swc": "^3.0.0",
        "eslint": "^8.32.0",
        "eslint-config-prettier": "^8.6.0",
        "eslint-config-xo": "^0.43.1",
        "eslint-config-xo-typescript": "^0.55.1",
        "eslint-plugin-react": "^7.32.1",
        "opener": "^1.5.2",
        "typescript": "^4.9.4",
        "vite": "^4.0.0"
    }

---

更新：如果我禁用這些規則並取消輸入，事情就會按照我的預期呈現。

/* eslint-disable @typescript-eslint/no-unsafe-assignment */
//...
const routes: RouteObject[] = [
    {
        path: '/',
        element: (
            <div>
                <a href="./test">test</a>
            </div>
        ),
    },
    { path: '/test', element: <div>hello</div> },
];

// eslint-disable-next-line @typescript-eslint/no-unsafe-call
const myRouter = createBrowserRouter(routes);

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <RouterProvider router={myRouter} />
    </React.StrictMode>
);

Answer 1

react-router@6和react-router-dom@6完全寫在 Typescript 中，所以不需要導入外部類型。 v5 類型可能會干擾您的構建步驟。

您應該卸載@types/react-router和@types/react-router-dom 。

npm uninstall --save @types/react-router
npm uninstall --save @types/react-router-dom

從這里我認為您不需要明確鍵入數據路由器。 RemixRouter createBrowserRouter而不是BrowserRouter 。

import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import AnItem from './components/Shared/AnItem';

const myRouter = createBrowserRouter([
  {
    path: '/',
    element: <AnItem />,
  },
]);

ReactDOM.createRoot(document.getElementById('root')!)
  .render(
    <React.StrictMode>
      <RouterProvider router={myRouter} />
    </React.StrictMode>
  );