好的，当我浏览React路由器的文档时，我看到建议是使用支持标准Data History Web APIs的新路由器，这些路由器相对较新。
我在浏览器中，所以我将使用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代码中将鼠标悬停，我会得到"intellisense"（如果它仍然是这个名字的话），所以我认为我的类型等等都Map正确：

(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，但是我被大喊大叫，说我应该使用更具体类型的路由器：
注意：你通常不会直接渲染一个[原文如此]，相反，你会渲染一个更适合你的环境的路由器，比如一个在网络浏览器中或者一个用于服务器渲染。
所以我用的是BrowserRouter，但它的错误是：
"BrowserRouter"引用了一个值，但在此处被用作类型。您的意思是"typeof BrowserRouter"吗？
我很确定我不是指typeof;我在定义一个变量为特定类型。
我错过了什么？我很难在谷歌上找到一个既使用配置而不是组件进行路由（和I think configuration is what I want，因为新的数据历史API路由器需要它），又是在TypeScript中的例子。
看起来Drew找到了一些东西。下面是我对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>
);