无法在另一个 <Router> 中渲染 <Router>答案

【问题标题】：cannot render a <Router> inside another <Router>无法在另一个 <Router> 中渲染 <Router>
【发布时间】：2021-12-29 15:09:17
【问题描述】：

每当我点击 Navbar.js 中的 Services 按钮时，我都会尝试渲染 DropDown.js 中的下拉菜单项。但是，当我单击“服务”按钮时，我收到此错误“您无法在另一个内部渲染。您的应用程序中不应有多个。”。我怎样才能解决这个问题？请帮我！非常感谢！

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;

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

就像不变错误所说，您应该只有一个路由器为整个应用程序提供路由上下文，或者至少没有任何嵌套路由器。删除包装每个单独的列表项/Link 的所有无关的 Router 组件，并确保您只有一个包装应用程序。

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;

应用示例：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

...

return (
  <Router>
    <DropDown />
    <Navbar />
    <Routes>
      .... routes here ....
    </Routes>
  </Router>
);

【讨论】：