[Solved] Error: A is only ever to be used as the child of element

While are you trying to use Route. Then you will face Error: A is only ever to be used as the child of element, this error.

In this article, we will discuss about this Error: A is only ever to be used as the child of element error in ReactJs. And how to resolve the error all the possible solutions with examples.

How Error: A <Route> is only ever to be used as the child of <Routes> element Error Occurs?

Most of the time you get this error while trying to use Route then you will face this error.

Error: A Route is only ever to be used as the child of element, never rendered directly. Please wrap your Route in a Routes

How To Fix Error: A <Route> is only ever to be used as the child of <Routes> element Error?

There are different ways to fix Error: A is only ever to be used as the child of element this error. Let us take a look at every solution.

• How To Fix Error: A <Route> is only ever to be used as the child of <Routes> element Error?

For the solve Error: A is only ever to be used as the child of element error First you have to wrap your route components in a routes component. And from the react-router-dom version 6 The routes also don’t take children elements, they render the components as JSX on the new element prop. Just follow the simple step – You need to wrap Route with Router and You can’t use Child in Route Instead you can use element property. Then, I hope your error will be gone.

• Error: A is only ever to be used as the child of element

For the solve Error: A is only ever to be used as the child of element error You have to use React-Router-dom Version 6 and Above. There have some rules you have to follow. That is you need to use Route inside Routes Component. You can use the element because the routes don’t take children.

Solution 1: Wrap Route with Routes

You have to wrap your route components in a routes component. And from the react-router-dom version 6 The routes also don’t take children elements, they render the components as JSX on the new element prop.

function App() {
   return (
     <div>
       <Routes>
         <Route path="/contact" element={<Contact />} />
         <Route path="/privacy" element={<Privacy />} />
         <Route path="/terms" element={<Terms />} />
      </Routes>
    </div>
  );}

With this solution, your error will be fixed.

Solution 2: Rules for Routes

From React Router dom version 6, There are some rules you have to follow. You need to Route inside the Routing Components, and you can use the element because the routes no longer take children.

Conclusion

In this article, we have discussed what causes the error and we have discussed ways to fix the error.

we hope this article has been informative. Thank you for reading. Kindly comment and let us know if you found it helpful.