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

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?

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.

1. You Need to use Route inside Routes Component
2. 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