Search
 
SCRIPT & CODE EXAMPLE
 

JAVASCRIPT

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

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;
Comment

PREVIOUS NEXT
Code Example
Javascript :: JavaScript querySelector - By ID 
Javascript :: ** javascript 
Javascript :: config mode en webpack 
Javascript :: jquery sum table column td 
Javascript :: days in the current month 
Javascript :: for javascript 
Javascript :: run function on page resize javascript 
Javascript :: js find integer 
Javascript :: form data 
Javascript :: js get current year last 2 digits substring 
Javascript :: cypress get inut value 
Javascript :: vue setup https 
Javascript :: javascript allow default 
Javascript :: js remove key from object 
Javascript :: java convert json string to list of maps 
Javascript :: external script in react 
Javascript :: gzip compression angular universal 
Javascript :: jquery cdn by google 
Javascript :: react alice carousel 
Javascript :: refresh div after ajax success 
Javascript :: How to create sequelize connection in javascript 
Javascript :: react list 
Javascript :: discord js remove reaction from user 
Javascript :: toastr options 
Javascript :: creating react app using npx 
Javascript :: convert json to array 
Javascript :: discord.js clear console 
Javascript :: lodash compare array without order 
Javascript :: 404 page in react 
Javascript :: learn nestjs 
ADD CONTENT
Topic
Content
Source link
Name
5+8 =