I am trying to use Route But I am facing the following error: Error: A <Route> is only ever to be used as the child of <Routes> element. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Lets Get Start with This Article.
How Error: A <Route> is only ever to be used as the child of <Routes> element Error Occurs?
I am trying to use Route But I am facing the following error in ReactJs.
Error: A Route is only ever to be used as the child of element, never rendered directly. Please wrap your Route in a Routes
So here I am writing all the possible solutions that I have tried to resolve this error.
How To Solve Error: A <Route> is only ever to be used as the child of <Routes> element Error?
- How To Solve Error: A
is only ever to be used as the child of element Error? To Solve Error: A <Route> is only ever to be used as the child of <Routes> element Error You need to follow these rules for React-Router-dom Version 6 and Above. You Need to use Route inside Routes Component. The routes also don’t take children Instead you can use element.
- Error: A
is only ever to be used as the child of element To Solve Error: A Route is only ever to be used as the child of element, never rendered directly. Please wrap your Route in a Routes You just need to wrap your
Route
components in aRoutes
component. And From react-router-dom version 6 The routes also don’t take children, they render the components as JSX on the newelement
prop. Here is Simple React Router Example that You have to follow. You Just need to Wrap Route with Router and You can’t use Child in Route Instead you can use element property. And now, Your error must be solved. Thank You.
Solution 1: Wrap Route with Routes
To Solve Error: A Route is only ever to be used as the child of element, never rendered directly. Please wrap your Route in a Routes You just need to wrap your Route
components in a Routes
component. And From react-router-dom version 6 The routes also don’t take children, they render the components as JSX on the new element
prop. Here is Simple React Router Example that You have to follow.
function App() {
return (
<div>
<Routes>
<Route path="/contact" element={<Contact />} />
<Route path="/privacy" element={<Privacy />} />
<Route path="/terms" element={<Terms />} />
</Routes>
</div>
);
}
You Just need to Wrap Route with Router and You can’t use Child in Route Instead you can use element property. And now, Your error must be solved. Thank You.
Solution 2: Rules for Routes
You need to follow these rules for React-Router-dom Version 6 and Above.
- You Need to use Route inside Routes Component
- The routes also don’t take children Instead you can use element
Conclusion
It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?
Also, Read
- [ERR_REQUIRE_ESM]: require() of ES Module from not supported
- Impish Release no longer has a Release file
- How to Check if String Contains a word in Javascript?
- ModuleNotFoundError: No module named ‘requests’
- ValueError: I/O operation on closed file in Python