我如何修复错误React Routr 6.6 +TypeScript?

Question

我有一个使用React router 6.6和Typescript的问题。

我安装了React路由器，并将它添加到Index.js中，如下所示:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { RouterProvider } from 'react-router-dom';
import { router } from './router';
const root = ReactDOM.createRoot(
....
);
root.render(
<RouterProvider router={router}>
<App />
</RouterProvider>
);

输入图片描述

我得到这个错误:

Type '{children: Element;路由器:路由器;} '不能赋值给type ' inintrinsicattributes &RouterProviderProps"。财产'children'不存在类型'IntrinsicAttributes &RouterProviderProps"。ts (2322)

输入图片描述

如何解决这个问题?

我期望用标准的方式工作react路由器，但是它不工作。

Answer 1

新的Data路由器与旧的传统路由器工作方式略有不同。有关新的Data api和语法的更多细节，请参见选择路由器。还要查看RouterProvider组件文档。

RouterProvider组件不占用children，因此将App作为子组件移除。

root.render(<RouterProvider router={router} />);

如果你仍然需要渲染App的某个地方，它需要移动到createBrowserRouter创建的router对象(或类似的)。