Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttribu-CodePudding

I've seen this question asked numerous times, but can't seem to find anything that works. React is currently @17 error is the following:

packages/app/src/App.tsx:230:10 - error TS2559: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.

230         <ScaffolderFieldExtensions>
         ~~~~~~~~~~~~~~~~~~~~~~~~~

The code that error is referring to is

const routes = (
    <FlatRoutes>
      <Route path="/create" element={<ScaffolderPage />}>
        <ScaffolderFieldExtensions>
          <LowerCaseValuePickerFieldExtension />
        </ScaffolderFieldExtensions>
      </Route>
    </FlatRoutes>
);

EDIT:

Receiving the same error for AppProvider not sure how to adjust that

const App = () => {
    return (
        <AppProvider>
          <AlertDisplay />
          <OAuthRequestDialog />
          <AppRouter>
            <SidebarPage>
              <AppSidebar/>
              {routes}
            </SidebarPage>
          </AppRouter>
        </AppProvider>
    );
};

Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes'.

CodePudding user response：

If you use Route then make sure you always wrap up that into Routes In version 5 it will be worked but v6 this is not valid.

import {Routes,Route} from "react-router-dom";

const routes = (
<FlatRoutes>
  <Routes>
   <Route path="/create" element={<ScaffolderPage />}>
    <ScaffolderFieldExtensions>
      <LowerCaseValuePickerFieldExtension />
    </ScaffolderFieldExtensions>
   </Route>
 </Routes>
</FlatRoutes>
);

CodePudding user response：

You can do something like this:

Store all routes sub-routes in an array.

import Homepage from '../views/HomePage/HomePage'
import Dashboard from '../Admin/Views/DashboardPage'
import Login from '../Admin/Views/LoginPage'

const routes = [
  {
    path: '/',
    component: Homepage,
    exact: true,
  },
{
    path: '/admin/login',
    component: Login,
    exact: true,
  },
  {
    path: '/admin/dashboard',
    component: Dashboard,
    exact: true,
  },
]

Then pass the sub-routes to keep it nested.

import React from "react";
import { Route } from "react-router-dom";
const RouteWithSubRoute = (route) => {
  return (
    <Route
      path={route.path}
      render={(props) => (
        // pass the sub-routes down to keep nesting
        <route.component {...props} routes={route.routes} />
      )}
    />
  );
};

export default RouteWithSubRoute;