How to Solve A is only ever to be used as the child of element, never rendered directly. Please wrap your in a error in React JS

If you have used React Router DOM earlier and trying to use it in your latest React JS application, then you may come across the error “A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.” when you try to configure the routes the way you did before.

So the following sample code will result in the above error message

index.js

...
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>

  </React.StrictMode>,
  document.getElementById('root')
);
...

App.js

...
function App() {
  return (
    <div className="App">
      <Route path="/" component={Home} />
    </div>
  );
}
...

The reason for the above error is because of the changes made in the React Router DOM library in their latest release.

Solutions:

To solve the above error, as the error message suggests, we need to wrap the routes inside a Routes element. Another change that we need to do is to change component inside Route to element.

We can do it either in the App.js file or inside index.js file

App.js

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </div>
  );
}

Or, if you want to keep all the routes in index.js, you can do like this

<React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Home />} />
      </Routes>
    </BrowserRouter>

  </React.StrictMode>,