inside another

Question

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>
  )
}

the router i believe needs to be at the root of your application, not just within a header — Daniel A. White, Dec 12 '21 at 14:37
don't use `` inside ``, remove the `` from your code & it will work — Dhruv, Dec 12 '21 at 14:39
Is the error message and description not explanatory enough? Don't render more than one router and certainly don't render a second router within a router. — Drew Reese, Dec 12 '21 at 18:11
@Dhruv when your suggestion is followed, a new error appears: "Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a ." I am not sure this is the resolution — ElectronicsNewbie, Apr 16 '22 at 07:13

score 0 · Accepted Answer · answered Dec 12 '21 at 14:45

0

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.

answered Dec 12 '21 at 14:45

Amanullha Zoha

149
4

@AngelescuHoria How did you solve it? Care to elaborate? – ElectronicsNewbie Apr 16 '22 at 07:14

inside another

1 Answers1