Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app

Question

我在我的反应应用程序中收到此错误，因为我在路由器内部使用路由器。我必须使用 Navbar.js 中的第二个路由器才能使用 <Link>。我在 2 个不同的文件中使用反应路由器。如果我删除其中一个，它会抛出一个错误，说 <Link> is not defined

这是我的代码： App.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>
    )
}

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

Answer 1

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

中使用 NavLink

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

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

Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app

Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app

javascript

reactjs

react-router

router