Navbar.jsx code:

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 error:

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.

The App.jsx code:

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;

The app component renders the navbar and the navbar is supposed to be rendering a navbar with clickable links which direct me to a different page(/contact,/projects,etc).

I previously had some style attributes within the component which then I removed thinking that could be the the cause,which it was not.This code seems to work fine when ran with <a> tags and href attributes.

CodePudding user response：

Navlink component should be inside Router

CodePudding user response：

i believe you're looking for the <Link> component and it doesn't have an href, it has a to property, so it would be like this <Link to="/wherever">Text Here</Link>

CodePudding user response：

The NavLink doesn't have href property, it has to property. so write to by removing href. Like this. And also move Navbar component inside Router.

<NavLink className="brand-name " style={{color:"white"}} to="/">Shriharsh's Colosseum</NavLink>