<Router> inside another <Router>-CodePudding

I'm pretty new to React and react-router-dom (v6) and I stumbled on an error: "Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app."

While there's a similar post I didn't find the answer I was looking for. As of right now I just have this code:

Header.tsx:

import './Header.min.css';
import { FaDumbbell } from 'react-icons/fa';
import { AiOutlineHome } from 'react-icons/ai';
import { useState } from 'react';
import App from '../../App';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
} from 'react-router-dom';


export default function Header() {
  const [status, setStatus] = useState('Sign Up');
  return (
    <header id = "wrapper">
      <h1><span>Fit</span>ify <FaDumbbell /></h1>
        <Router>
          <div>
            <nav>
              <ul id = "nav_links">
                <li id = "home">
                  <Link to = "/"><AiOutlineHome id = 'house' />Home</Link>
                </li>
                <li className = "rest">{status}</li>
                <li className = "rest">Stats</li>
                <li className = "rest">Leaderboards</li>
                <li className = "rest">Goals</li>
              </ul>
            </nav>

            <Routes>
              <Route path = "/" element = {<App />} />
            </Routes>
          </div>
        </Router>
    </header>
  )
}

CodePudding user response：

you can use the router only one time in your apps. You use the Router in the parent component like the App component. you can delete the nested router then this problem is solved.