Ais only ever to be used as the child of element, never rendered directly. Please wrap yourin a .Getting this error

Question

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

import Users from "./users/pages/Users";

const App = () => {
  return (
    <Router>
    
      <Route path="/">
        <Users />
      </Route>
   
    </Router>
    
  );
};

export default App;

I tried replacing router with routes still getting same error.

Answer 1

You need to wrap Route elements in a Routes element

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import Users from "./users/pages/Users";

const App = () => { 
  return (
    <Router>
      <Routes>
        <Route path="/">
          <Users />
        </Route>
      </Routes>
    </Router>
  ); 
};

Answer 2

Issues

1. All Route components can only be rendered by a parent Routes component, or another Route component in the case of nested routes.
2. Only other Route components are valid children of the Route component, so Users can't be rendered as a child component.

Solution

1. Wrap the Route component in a Routes component.
2. Render Users as the element of its Route.

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Users from "./users/pages/Users";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Users />} />
        ... other routes ...
      </Routes>
    </Router>
  );
};

export default App;