我的代码中出现此错误-&gt;未捕获错误：不变失败：您不应该使用<Link>外面<Router> ，有人可以看到问题吗？

Question

这是我得到的错误，

Uncaught Error: Invariant failed: You should not use <Link> outside a <Router>
at invariant (tiny-invariant.esm.js:12:1)
at Link.js:89:1
at updateContextConsumer (react-dom.development.js:21207:1)
at beginWork (react-dom.development.js:21652:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)

下面给出的是我为创建导航栏而编写的原始代码，

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

export default function Navbar(props) {
    return (
        <div>
            <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
                <h3>{props.title}</h3>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>

                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav mr-auto">
                        <li className="nav-item active">
                            <Link to="/" className="nav-link">Home <span className="sr-only">(current)</span></Link>
                        </li>
                        <li className="nav-item">
                            <Link to="/about" className="nav-link">{props.aboutText}</Link>
                        </li>
                    </ul>

                    <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">Enable Dark Mode</label>
                    </div>
                </div>
            </nav>
        </div>
    )
}
// this acts as a check
Navbar.propTypes = {
    title: PropTypes.string.isRequired,
    aboutText: PropTypes.string.isRequired
}
// If the prop types are not passed and these values will be used as default placeholders
Navbar.defaultProps = {
    title: 'stranger',
    aboutText: 'hello there'
}
// ${props.mode==='light'?'dark':'light'} is used as an if else statement.

当我开始使用链接标记而不是href时，代码中的问题发生在第17行和第20行之后。 有人可以告诉我问题出在哪里，我正在使用 react-router-dom v5。

Answer 1

在组件内使用react-router-dom的链接。 您必须确保您的组件或整个应用程序都包含在BrowserRouter下。 它也是react-router-dom的一个组件

尝试这个。

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

export default function Navbar(props) {
    return (

        <div>
         <Router>
            <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
                <h3>{props.title}</h3>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>

                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav mr-auto">
                        <li className="nav-item active">
                            <Link to="/" className="nav-link">Home <span className="sr-only">(current)</span></Link>
                        </li>
                        <li className="nav-item">
                            <Link to="/about" className="nav-link">{props.aboutText}</Link>
                        </li>
                    </ul>

                    <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">Enable Dark Mode</label>
                    </div>
                </div>
            </nav>
          </Router>
        </div>
    )
}

Answer 2

import { Route, BrowserRouter as Router, Routes, Navigate} from "react-router-dom";
import "./App.css";
import Mainpanel from "./Mainpanel";
import Login from "./Components/Login";
import Registration from "./Components/Registration";
import PrivateRoute from "./PrivateRoute";
import React from "react";
import AuthProvider from "./AuthContext/AuthContext";
function App() {
  return (
    <div className="App">
      <Router>
        <AuthProvider>
          <Routes>
            <Route
              path="/*"
              element={
         <PrivateRoute>
           <Mainpanel />
         </PrivateRoute>
         }/>
        <Route path="/signin" element={<Login />} />
        <Route path="/signup" element={<Registration />} />
        <Route path="/" element={<Navigate to="/dashboard" replace />} />
       </Routes>
      </AuthProvider>
     </Router>
   </div>
);
}
        
export default App;

您需要在app.js文件中的<Router></Router>之间包装所有路由