In this article, we will bring you possible and practical solutions to fix the “error: A <Route> is only ever to be used as the child of <Routes> element”. If you are facing this error and still have not found the answer, then read this article to get yourself the most effective solution for that error.

When does the “error: A <Route> is only ever to be used as the child of <Routes> element” happen?

“Route Component” can be anything when passed as a child of <Router>. In React Router, Route Component can be considered an indispensable component in learning and understanding in the best way. When the path matches the current URL, it renders some UI, which is the primary job of the Route Component. There are three props for Route Components: Matching Props, Route Props  Other Props.

We may unluckily encounter the “error: A <Route> is only ever to be used as the child of <Routes> element” when trying to use the route for example. The error message might look like this:

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

There are many ways to solve this error, but here we will give you the most feasible and effective solutions. We will discuss each solution in detail below.

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

Solution 1: Wrap Route with Routes

The first way that you can try to fix this is to wrap the route with routes. To do it, you need to wrap your route components in a routes component. And child elements are not used by routes since the react-router-dom version 6. Instead, components are represented on the new element as JSX (JSX = Javascript + XML. It transforms almost XML syntax into Javascript. Help programmers can code ReactJS using XML syntax instead of using Javascript ). You can refer to a simple example of a react-router below:

 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. Good luck!

Solution 2: Rules for Routes

From version 6 onwards, there are some rules that you have to follow. That is, you need to use routing inside the routing component, and you can use the element because the routes no longer take children.

Solution 3: Switch the react-router-dom to another version

Try switching to another version if the problem is in your react-router-dom version. The example below is version 5.3.0; you just need to use the following code:

npm install [email protected]

Besides, you can also revert to version 5.2.0

Solution 4: Convert “Switch” to “Routes”

This is quite a simple way, “switch” is replaced by “routes,” and “component” can be replaced with “element” that can help you fix the error.

Conclusion

What do you think about the solutions we mentioned above? Are they possible and useful for you to solve? If you have any suggestions or comments, please write them down in the comments section. We hope we have helped you to solve the “error: A <Route> is only ever to be used as the child of <Routes> element”; thank you for reading the article.

Read more:

→ Get The Current Route Using React Router