I have a problem with using React router 6.6 and Typescript.

I installed React router and added it to Index.js like:

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

enter image description here

And I'm getting this error:

Type '{ children: Element; router: Router; }` is not assignable to type 'IintrinsicAttributes & RouterProviderProps'. Property 'children' does not exist on type 'IntrinsicAttributes & RouterProviderProps'. ts(2322)

enter image description here

How can I fix this issue?

I was expecting to work react router with standard way, but it didn't work.

CodePudding user response：

The new Data routers work a little differently from the older conventional routers. See Picking a Router for more details on the new Data APIs and syntax. Also check the RouterProvider component docs.

The RouterProvider component takes no children, so remove App as a child component.

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

If you still need to render App somewhere it'll need to be moved into the router object you created with createBrowserRouter (or similar).