Reactjs - A<Route>is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your<Route>in a<Routes> .Getting this error

ArushiHinger
August 31, 2023
263 views
0 votes
2 Answers

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.

Answers

- AnhTran
- August 31, 2023 at 4:56 pm
- 0 votes
0
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>
  ); 
};
```
Login or Signup to reply.

- DrewReese
- August 31, 2023 at 5:25 pm
- 0 votes
0
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;
```
Login or Signup to reply.