ReactJS: [Home] is not a component. All component children of must be a or

by

first of all check the version of Your react router Dom .This error appear when you have V6 of react-router-dom. V6 have many groundbreaking change so try to read official documentation
check this out:https://reacttraining.com/blog/react-router-v6-pre/
Now for your question part
React router v6 introduce Routes

Introducing Routes

One of the most exciting changes in v6 is the
powerful new element. This is a pretty significant upgrade
from v5’s element with some important new features including
relative routing and linking, automatic route ranking, and nested
routes and layouts.

  <BrowserRouter>
      <div className="App" style={{ backgroundImage: "url(./circle.jpg)" }}>
        <Header />
        <Routes>
          <Route exact path="/" element={<Home/>} />
          <Route path="/quiz" element={<Quiz/>} />
         
        </Routes>
      </div>
      <Footer />
    </BrowserRouter>

Also check migration guide from v5 to v6
https://github.com/ReactTraining/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migrating-5-to-6.md#relative-routes-and-links

More Related Contents:

  1. react router v6 navigate outside of components
  2. Problem in redirecting programmatically to a route in react router v6
  3. Intercept/handle browser’s back button in React-router?
  4. React doesn’t reload component data on route param change or query change
  5. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  6. Multiple Nested Routes in react-router-dom v4
  7. How to create a protected route with react-router-dom?
  8. Material-ui adding Link component from react-router
  9. React: ‘Redirect’ is not exported from ‘react-router-dom’
  10. How can I redirect in React Router v6?
  11. How to render an array of objects in React?
  12. Nested routes with react router v4 / v5
  13. React react-router-dom pass props to component
  14. Active link with React-Router?
  15. ReactJS – Pass props with Redirect component
  16. Using anchor tags in react-router 4
  17. How to hide navbar in login page in react router
  18. css position absolute making the textbox go down
  19. How is this type annotation working in React code without TypeScript?
  20. React-router: How to manually invoke Link?
  21. React-router – How to pass data between pages in React?
  22. React-router v4 – cannot GET *url*
  23. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  24. Why I receive blank page? React
  25. using history with react-router-dom v6
  26. Detect change in query param react-router-dom v4.x and re-render component
  27. How to restrict access to routes in react-router?
  28. React – How to open PDF file as a href target blank
  29. React Router BrowserRouter leads to “404 Not Found – nginx ” error when going to subpage directly without through a home-page click
  30. ReactJS Bootstrap Navbar and Routing not working together

Leave a Comment