Property 'component' does not exist on type

user_14368480 0
Viewed 15543

Why do I get this error for the when to declare a "component" property in "Route"; Property 'component' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.

import { Routes, Route } from 'react-router-dom'

import './App.css'
import HomePage from './pages/HomePage'

function App() {
  return(
    <div>
    <Routes>
      <Route path="/" component={HomePage}/>
    </Routes>
    </div>
  )
} ``` The problem might be; because I dont use 'exact path="/"' that might also give an error
react-router
4 Answers

With the upgrade of react-router-dom to version 6.0, certain properties have changed. The syntax you are using will work fine for version 5.0. To update to v6, make this change to your code:

<Route path="/" element={<HomePage />} />
user_74330630

I solved it by simply typing this instead;

<Route path="/">{HomePage}</Route>

And it worked

user_143684800

Version 6 of the router changed the way to create these kinds of routes - https://reactrouterdotcom.fly.dev/docs/en/v6/getting-started/overview

nanoTitan got the right answer with:

<Route path="/" element={<HomePage />} />

Regarding exact - I do not think you need to worry about this any more. If you have a route like / and another route like /about version 6 is smart enough to route to about. Apparently, even if you have routes like /user/:uuid and /user/new - navigating to /user/new will be understood as the new page.

I also found that tutorials and the like are all about version 5, it is a confusing environment to learn in.

user_6054810

Just switch version of react-router-dom to "^5.1.2", and @types/react-router-dom: to "^5.1.3"

user_170056470
Related