Breaking News: Grepper is joining You.com. Read the official announcement!

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

Dharmesh Jadav answered on June 9, 2022 Popularity 2/10 Helpfulness 1/10

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

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

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

Comment

import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import {BrowserRouter, Routes, Route, Link} from 'react-router-dom';
import Homescreen from './screens/Homescreen';


function App() {
  return (
    <div className="App">
      <Navbar/>
      <BrowserRouter>      
        <Routes>
          <Route path='/home' element={<Homescreen/>} />
        </Routes>
    
      </BrowserRouter>
     
    </div>
  );
}

export default App;
 Run code snippet

Popularity 2/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: whatever

Link to this answer
Share Copy Link

Contributed on Aug 01 2022

Dharmesh Jadav

0 Answers Avg Quality 2/10

Closely Related Answers

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

Comment

Solution 1: Just Use route in this way

import { render } from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import App from "./App";
import Expenses from "./routes/expenses";
import Invoices from "./routes/invoices";
const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="expenses" element={<Expenses />} />
      <Route path="invoices" element={<Invoices />} />
    </Routes>
  </BrowserRouter>,
  rootElement
);



Solution 2: Another way to use route. Just wrap your routes by Routes


import { Route, Routes } from "react-router-dom";
import Welcome from "./Pages/child1";
import Game from "./Pages/child2";
function App() {
    return (
        <div>
          <Routes>
            <Route path = "/child1">
                <Welcome />
            </Route>
            <Route path = "/child2">
                <Game />
            </Route>
           </Routes>
        </div>
    );
}
export default App;



Solution 3: Here we solved this one  change that is the multiple routes are now enclosed within a <Switch> tag

import React from "react";
import "./App.css";
import {
BrowserRouter as Router,
Switch,
Route,
Redirect,
} from "react-router-dom";
function App() {
return (
	<div className="App">
	<Router>
		<Switch>
		<Route path="/child1">
			<div>
			<p>This is child route 1</p>
			</div>
		</Route>
		<Route path="/child2">
			<div>
			<p>This is child route 2</p>
			</div>
		</Route>
		</Switch>
	</Router>
	</div>
);
}
export default App;

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 09 2022

Prickly Puffin

0 Answers Avg Quality 2/10

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

Contents

More Related Answers

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

Closely Related Answers

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

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.