Component is not working instead of element in react router dom v6.6.1

JavaScript
1

i was thinking that instead of using element attribute using component attribute for components is easy but it is not working,here is my code:-

<Routes>
              <Route path="/" component={Login } />
              <Route path="/sign-in" component={Login } />
              <Route path="/sign-up" component={SignUp } />
              <Route path="/sign-up2" component={SignUpFinal } />
</Routes>
2

wrong syntax, try something like this instead

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

Here is an example from a working project I am on at the moment

  <Router>
        <Routes>
          <Route
            path="/"
            element={
              <DndProvider backend={HTML5Backend}>
                <FrontView
                  saveUserSettings={saveUserSettings}
                  userSettings={userSettings}
                  showIntroModal={showIntroModal}
                />
              </DndProvider>
            }
          />
          <Route path="/about-idk-pm" element={<AboutIDK />} />
        </Routes>
      </Router>

"react-router-dom": "^6.4.0",
3

Official docs for why “element” prop in v6 FAQs v6.6.1 | React Router

4

yes i was using that but using component avoids extra work have seen on YT tutorial using it in v6 and seen topic on stack over flow people saying before almost 4months and it is not working,may be they removed in the updated version,i have no idea.tried searching for documentation but can not seem to find any relevant information.

5

Not really possible.
The official docs are saying

"** In React Router v6 we switched from using v5’s <Route component> and <Route render> APIs to <Route element>. Why is that?

For starters, we see React itself taking the lead here with the <Suspense fallback={<Spinner />}> API. The fallback prop takes a React element, not a component. This lets you easily pass whatever props you want to your <Spinner> from the component that renders it.**"

Property 'component' does not exist on type 'IntrinsicAttributes & RouteProps'

Now if you are really keen to use the old api you need to downgrade to an older v5 version.

Very likely the youtube video is outdated.

6

I know is annoying when a tutorial has a way of doing it but the latest breaking changes SemVer release has new stuff, but this is the JavaScript ecosystem.

Get use to it. Just like marriage I would say :smiley: (silly analogy)

Do not worry about non existent performance impact.