javascript - NavLink 组件不允许网站渲染并显示其中所有元素的奇怪错误

Question

Navbar.jsx 代码:

import React from "react"
import {NavLink} from "react-router-dom";
const Navbar = ()=>{
   return(
<>
    <div className="container-fluid nav_bg">
      <div className="row">
        <div className="col-10 ms-auto ">

      <nav className="navbar sticky-top navbar-expand-lg transparent" id="nav1">
      <NavLink className="brand-name " style={{color:"white"}} href="/">Shriharsh's Colosseum</NavLink>
      <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 ms-auto brand-desc text-uppercase">
          <li className="nav-item active">
            <a className="nav-link white-sucker" href="/">Home</a>
          </li>
          <li className="nav-item">
            <a className="nav-link white-sucker"   href="/projects">Projects</a>
          </li>
          <li className="nav-item">
            <a className="nav-link white-sucker"  href="/contact">Contact</a>
   </li>
        </ul>
      </div>
    </nav>

        </div>
      </div>
    </div>
   </>
   );
};

export default Navbar;

错误:

The above error occurred in the <NavLink> component:

    at NavLinkWithRef (http://localhost:3000/static/js/bundle.js:43638:23)
    at nav
    at div
    at div
    at div
    at Navbar
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

App.jsx 代码:

import "./../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./../node_modules/bootstrap/dist/js/bootstrap.bundle";
import React from "react";
import Projects from "./Projects";
import Contact from "./Contact";
import {Route} from "react-router-dom";
import Home from "./Home";
import Navbar from "./Navbar";
import {Routes,BrowserRouter as Router} from "react-router-dom";


const App = () => {
    return(
        <>
            <style>{'body { background-color: black; }'}</style>
                <Navbar/>
                <Router>
                    <Routes>
                        <Route exact path="/" element={<Home />}/>
                        <Route exact path="/contact" element = { <Contact />}/>
                        <Route exact path="/projects" element = { <Projects/>}/>
                    </Routes>
                </Router>
        </>
    );

};
export default App;

应用程序组件呈现导航栏，而导航栏应该呈现带有可点击链接的导航栏，这些链接将我引导到不同的页面(/联系人、/项目等)。

我之前在组件中有一些样式属性，然后我删除了这些属性，认为这可能是原因，但事实并非如此。当使用 <a> 运行时，此代码似乎工作正常。标签和 href 属性。

解决方案:

它的工作方式是我必须将 NavLink 包装为:

 <Router>
     <NavLink to="/"></NavLink>
     <NavLink to="/yadada"></NavLink>
      <NavLink to="/yadada"></NavLink>
</Router>````

Answer 1

Navlink 组件应该位于 Router 内部