React Router V6 Uncaught Error: You cannot render a <Router> inside another <Router>-CodePudding

I currently have my app as follows with my routes wrapped inside of BrowserRouter and I am receiving

Uncaught Error: You cannot render a <Router> inside another <Router>

Below is my codesandbox

I did a

ctl F Shift

and only have 1 router in my app. Does anyone see a syntax error or have a suggestion? Codesandbox

Here is my App component:

import { BrowserRouter, Routes, Route, Router, Link } from "react-router-dom";
import Header from "./components/Header/Header";
import Features from "./components/body/Features/FeaturesGrid/FeaturesGrid";
import Artists from "./components/body/Artists/Artists";
import Fans from "./components/body/Fans/Fans";
import Groups from "./components/body/Groups/Groups";
import Footer from "./components/body/Footer/Footer";
import PPV from "./components/body/PPV/PPV";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Header />
      </nav>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/features" element={<Features />} />
        <Route path="/artists" element={<Artists />} />
        <Route path="/fans" element={<Fans />} />
        <Route path="/groups" element={<Groups />} />
        <Route path="/ppv" element={<PPV />} />
        {/* <Route path="/feed" element={<Feed />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Here is my Header component:

import { useState } from "react";
import HeaderCSS from "../Header/Header.module.css";
import Menu from "../../svgs/bars-solid.svg";
import Close from "../../svgs/times-solid.svg";
import Logo from "../../svgs/logotrans.svg";
import { Link } from "react-router-dom";

function Header() {
  const [menu, setMenu] = useState(false);

  const toggleMenu = () => {
    setMenu(!menu);
  };

  const styleMenu = {
    left: menu ? 0 : "-100%",
  };

  return (
    <header>
      <div className={HeaderCSS.menu} onClick={toggleMenu}>
        <img src={Menu} alt="" width="30" />
      </div>

      <div className="logo">
        <img src={Logo} all="" width="120" height="90" />
      </div>
      <div className={HeaderCSS.nav_container}>
        <ul style={styleMenu}>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/features">Features</Link>
          </li>
          <li>
            <Link to="/artists">Artists</Link>
          </li>
          <li>
            <Link to="/fans">Fans</Link>/
          </li>
          <li>
            <Link to="/groups">Groups</Link>
          </li>
          <li>
            <Link to="/ppv">PPV</Link>
          </li>
          <li>
            <Link to="/feed">Feed</Link>
          </li>
          <li onClick={toggleMenu}>
            <img src={Close} alt="" width="30" className="menu" />
          </li>
        </ul>
      </div>
    </header>
  );
}

export default Header;

CodePudding user response：

You are rendering App recursively

<Route path="/" element={<App />} />

You can't do that

Replace App with another component

<Route path="/" element={<div />} />