close

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

Hello Guys, How are you all? Hope You all Are Fine. Today I am trying to use routing But I am facing following error Error: A Route is only ever to be used as the child of element, never rendered directly. Please wrap your Route in a Routes in reactjs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How This error occurs ?

I am trying to use routing But I am facing following error.

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

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

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

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

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

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

Solution 1: Use Route this way

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: Route Example

Follow this Route Example.

function App() {
  return (
    <div>
      <Routes>
        <Route path="/welcome" element={<Welcome />} />
        <Route path="/game" element={<Game />} />
        <Route path="/leaderboard" element={<Leaderboard />} />
      </Routes>
    </div>
  );
}

Solution 3: wrap your routes by Routes

Just wrap your routes by Routes.

import { Route, Routes } from "react-router-dom";
import Welcome from "./Pages/Welcome";
import Game from "./Pages/Game";
import Leaderboard from "./Pages/Leaderboard";

function App() {
    return (
        <div>
          <Routes>
            <Route path = "/welcome">
                <Welcome />
            </Route>
            <Route path = "/game">
                <Game />
            </Route>
            <Route path = "/leaderboard">
                <Leaderboard />
            </Route>
           </Routes>
        </div>
    );
}

export default App;

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read