cannot render a <Router> inside another <Router> - reactjs

Question

I'm trying to render out the dropdown menu items from DropDown.js whenever i click on Services button from Navbar.js. However, when i click on Services button i got this error "You cannot render a inside another . You should never have more than one in your app.". How can i fix this? Please help me! Thank you so much!
DropDown.js:
import React from "react";
import { serviceDropdown } from "./NavItems";
import { Link, BrowserRouter as Router } from "react-router-dom";
import "./DropDown.css";
function DropDown() {
return (
<div>
<ul className="subnav-items">
{serviceDropdown.map((item) => {
return (
<Router>
<li key={item.id} className={item.cName}>
<Link to={item.path}>{item.title}</Link>
</li>
</Router>
);
})}
</ul>
</div>
);
}
export default DropDown;
Navbar.js:
import React, { useState } from "react";
import { navItems } from "./NavItems";
import { Link, BrowserRouter as Router } from "react-router-dom";
import "./Navbar.css";
import DropDown from "./DropDown";
function Navbar() {
const [dropDown, setDropdown] = useState(false);
return (
<div>
<ul className="nav-items">
{navItems.map((item) => {
if (item.title === "Services") {
return (
<Router>
<li
key={item.id}
className={item.cName}
onMouseEnter={() => setDropdown(true)}
onMouseLeave={() => setDropdown(false)}
>
<Link to={item.path}>{item.title}</Link>
{dropDown && <DropDown />}
</li>
</Router>
);
}
return (
<Router>
<li key={item.id} className={item.cName}>
<Link to={item.path}>{item.title}</Link>
</li>
</Router>
);
})}
</ul>
</div>
);
}
export default Navbar;

Answer 1

It's like the invariant error says, you should only have one router providing a routing context to the entire app, or at a minimum, not have any nested routers. Remove all the extraneous Router components wrapping each individual list item/Link, and ensure you've only one wrapping the app.
DropDown.js:
import React from "react";
import { serviceDropdown } from "./NavItems";
import { Link } from "react-router-dom";
import "./DropDown.css";
function DropDown() {
return (
<div>
<ul className="subnav-items">
{serviceDropdown.map((item) => {
return (
<li key={item.id} className={item.cName}>
<Link to={item.path}>{item.title}</Link>
</li>
);
})}
</ul>
</div>
);
}
export default DropDown;
Navbar.js:
import React, { useState } from "react";
import { navItems } from "./NavItems";
import { Link } from "react-router-dom";
import "./Navbar.css";
import DropDown from "./DropDown";
function Navbar() {
const [dropDown, setDropdown] = useState(false);
return (
<div>
<ul className="nav-items">
{navItems.map((item) => {
if (item.title === "Services") {
return (
<li
key={item.id}
className={item.cName}
onMouseEnter={() => setDropdown(true)}
onMouseLeave={() => setDropdown(false)}
>
<Link to={item.path}>{item.title}</Link>
{dropDown && <DropDown />}
</li>
);
}
return (
<li key={item.id} className={item.cName}>
<Link to={item.path}>{item.title}</Link>
</li>
);
})}
</ul>
</div>
);
}
export default Navbar;
App example:
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
...
return (
<Router>
<DropDown />
<Navbar />
<Routes>
.... routes here ....
</Routes>
</Router>
);