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

We Are Going To Discuss About ReactJS: [Home] is not a component. All component children of must be a or . So lets Start this Javascript Article.

<h2 id="h-reactjs:-[home]-is-not-a–component.-all-component-children-of–must-be-a–or-“>ReactJS: [Home] is not a component. All component children of must be a or
How to solve ReactJS: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

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

ReactJS: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

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

Solution 1

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

Original Author salik saleem Of This Content

Solution 2

Only Route or React.Fragment are allowed to be children of the Routes component, and vice-versa. You are already rendering a Home component on the “/” path, so remove the extraneous <Home /> component. It appears you are also using react-router-dom v6, so the Route components no longer render components via a render or component prop, they now render components as JSX on the element prop.

<Routes>
  <Route exact path="/" component={Home} />
  <Route path="/quiz" component={Quiz} />
  <Home /> // <-- remove this
</Routes>

to

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/quiz" element={<Quiz />} />
</Routes>

Original Author Drew Reese Of This Content

Solution 3

try this syntax worked for me

 <Routes>
      <Route path="expenses" element={<Expenses />} />
      <Route path="invoices" element={<Invoices />} />
 </Routes>

refer doc for more
https://reactrouterdotcom.fly.dev/docs/en/v6/getting-started/tutorial

Original Author 8840 Vinay Shelke Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

ittutorial team

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment