错误：您无法在另一个 <Router> 中渲染 <Router>。你的应用程序中不应该有多个答案

【问题标题】：Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app错误：您无法在另一个 <Router> 中渲染 <Router>。你的应用程序中不应该有多个
【发布时间】：2021-12-20 01:06:02
【问题描述】：

我在我的 react 应用程序中收到此错误，因为我在路由器中使用了路由器。我必须使用 Navbar.js 中的第二个路由器才能使用<Link>。我在 2 个不同的文件中使用反应路由器。如果我删除其中一个，它会抛出一个错误，提示 <Link> 未定义

这是我的代码：应用.js

import { useState } from 'react';
import './App.css';
import Alert from './components/Alert';
import About from './components/About';
import Navbar from './components/Navbar';
import {
  BrowserRouter as Router,
  Route,
  Routes,
  Link
} from "react-router-dom"
import TextForm from './components/TextForm';


function App() {
  const [mode, setMode] = useState("light");
  const [alert, setAlert] = useState(null);

  const showAlert = (message, type, symbolID, directory) => {
    setAlert({
      msg: message,
      type: type,
      symbolID: symbolID,
      directory: directory
    })

    setTimeout(() => {
      setAlert(null);
    }, 2100);
  }

  const toggleMode = () => {
    if(mode === "light"){
      setMode("dark")
      document.body.style.backgroundColor = "rgb(21 25 30)";  
      document.body.style.color = "white";  // #dadce0
      showAlert("Dark Mode has been Enabled", "success", "check-circle-fill", "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z");
    }
    else {
      setMode("light")
      document.body.style.backgroundColor = "white";
      document.body.style.color = "black";
    }
  }

  return (
    <>
    <Router>
      <Navbar title="TakhtiUtils" mode={mode} toggleMode={toggleMode}/>
      <Alert alert={alert}/>
      <Routes>
        <Route path="/About" component={About}>
          <About/>
        </Route>
        <Route path="/" component={TextForm}>
          <TextForm mode={mode} showAlert={showAlert} heading="Enter Some Text:"/>
        </Route>
      </Routes>
    </Router>
    </>
  );
}

export default App;

这是 Navbar.js：

import React from 'react'
import {
    BrowserRouter as Router,
    Link
  } from "react-router-dom"

export default function Navbar(props) {

    return (
        <Router>
        <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
            <div className="container-fluid">
                <a className="navbar-brand" href="/">{props.title}</a>
                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarNav">
                    <ul className="navbar-nav">
                        <li className="nav-item">
                            <Link className="nav-link active" aria-current="page" to="/">Home</Link>
                        </li>
                        <li className="nav-item">
                            <Link className="nav-link" to="/about">About</Link>
                        </li>
                    </ul>
                </div>
            </div>

            <div className={`form-check form-switch text-${props.mode==='light'?'dark':'light'}`}>
                <input className="form-check-input" onClick={props.toggleMode} type="checkbox" role="switch" id="flexSwitchCheckDefault"/>
                <label className ="form-check-label" htmlFor="flexSwitchCheckDefault">Dark Mode</label>
            </div>
        </nav>
        </Router>
    )
}

您能告诉我一种在两个组件中使用一个反应路由器的方法吗？谢谢！

【问题讨论】：

您的NavBar 组件已经是路由器的子组件，因此您根本不需要内部路由器。只要层次结构中有路由器，<Link> 就可以工作，不一定在同一个组件中。

标签： javascript reactjs react-router router

【解决方案1】：

您不应该在导航栏中使用其他路由器看来您需要在 Navbar 中使用 NavLink

import {Link, NavLink} from "react-router-dom";

    <NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

【讨论】：