javascript - Type '() => JSX.Element' kan ikke tilordnes typen 'ReactNode'

Jeg prøver å rendre en komponent fra et objekt, men koden feiler med en feil:

const Login = () => <>login</>

const publicRoutes = [
  {
    path: '/login',
    component: Login
  }
]

function AppRouter() {
  return <Routes>
      {publicRoutes.map(({path, component}) => (
        <Route path={path} component={component} /> // warning
      ))}
    </Routes>
  )
}

Svar #1

Siden versjon 6 tar ikke React Router Dom lenger komponenter, men elementer i stedet. [react-router-dom] Så i stedet for å sende komponent, må du sende <Component/> slik:

{publicRoutes.map(({path, component: Component}) => (
  <Route path={path} element={<Component/>} /> // no warning
))}

Svar #2

Hvis du bruker TS og får denne typen feil i 2023/2024, husk bare at det kan være relatert til tsconfig!

I mitt tilfelle fikk jeg det for to forskjellige prosjekter, og løsningene så slik ut:

"compilerOptions": {
    "paths": {
      "react": ["node_modules/@types/react"]
    }
  }

eller

"compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "module": "commonjs",
    "types": ["node"],
    "emitDecoratorMetadata": true,
    "target": "es2021"
  },

Lek med tsconfig.json-alternativer, og jeg håper dette hjelper deg, fordi jeg brukte veldig mye tid før den feilen, som ikke gir noen mening, førte meg til denne artikkelen som hjalp meg å finne kilden til problemet

Kreditter til: En tilfeldig blogg fra side 4 av Googlesøk

Relaterte artikler