title: why does adding a NavLink to my navbar completely destroy my react application?
body: <p>i have a well-functioning site, and i want to add active link highlighting to my navbar. every tutorial i've seen says to use NavLink, but when I add a NavLink to my Navbar.js file, the entire site (even other pages) just turns into a blank white screen.</p>
  <p>how do i fix this? i've included some of my code below</p>
  <p><strong>NavBar.js</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import '../styles/Navbar.css';
  import React, { useCallback, NavLink } from "react";
  import { useNavigate } from 'react-router-dom';
  
  export default function Navbar() {
    const navigate = useNavigate();
    const handleHome = useCallback(() =&gt; navigate('/', {replace: true}), [navigate]);
    const handleContribute = useCallback(() =&gt; navigate('/contribute', {replace: true}), [navigate]);
    const handleAbout = useCallback(() =&gt; navigate('/about', {replace: true}), [navigate]);
    const handleContact = useCallback(() =&gt; navigate('/contact', {replace: true}), [navigate]);
  
      return (
          &lt;div id = "navbar"&gt;
            &lt;div id = "fourth"&gt;&lt;button onClick = {handleHome}&gt;Home&lt;/button&gt;&lt;/div&gt;
            &lt;div id = "fourth"&gt;&lt;button onClick = {handleContribute}&gt;Contribute&lt;/button&gt;&lt;/div&gt;
            &lt;div id = "fourth"&gt;&lt;button onClick = {handleAbout}&gt;About&lt;/button&gt;&lt;/div&gt;
            &lt;div id = "fourth"&gt;&lt;button onClick = {handleContact}&gt;Contact&lt;/button&gt;&lt;/div&gt;
          &lt;/div&gt;
      );
  }</code></pre>
  </div>
  </div>
  </p>
  <p>*<em>App.js</em></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import '../styles/App.css';
  import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
  import { React, useEffect } from "react";
  import Navbar from "./Navbar";
  import Home from "./Home";
  import Contribute from "./Contribute";
  import About from "./About";
  import Contact from "./Contact";
  //there's more imports here, but i won't include them on this post because they're not relevant
  export default function App() {
    useEffect(() =&gt; {
      document.body.style.overflow = "hidden";
    })
    return (
        &lt;Router&gt;
          &lt;Navbar /&gt;
          &lt;Routes&gt;
            &lt;Route path = "/" element = {&lt;Home /&gt;}/&gt;
            {/*french*/}
            &lt;Route path = "/frenchi" element = {&lt;FrenchI /&gt;} /&gt;
            &lt;Route path = "/frenchii" element = {&lt;FrenchII /&gt;} /&gt;
            &lt;Route path = "/frenchiii" element = {&lt;FrenchIII /&gt;} /&gt;
            &lt;Route path = "/frenchiv" element = {&lt;FrenchIV /&gt;} /&gt;
            {/*german*/}
            &lt;Route path = "/germani" element = {&lt;GermanI /&gt;} /&gt;
            &lt;Route path = "/germanii" element = {&lt;GermanII /&gt;} /&gt;
            &lt;Route path = "/germaniii" element = {&lt;GermanIII /&gt;} /&gt;
            &lt;Route path = "/germaniv" element = {&lt;GermanIV /&gt;} /&gt;
            {/*latin*/}
            &lt;Route path = "/latini" element = {&lt;LatinI /&gt;} /&gt;
            &lt;Route path = "/latinii" element = {&lt;LatinII /&gt;} /&gt;
            &lt;Route path = "/latiniii" element = {&lt;LatinIII /&gt;} /&gt;
            &lt;Route path = "/latiniv" element = {&lt;LatinIV /&gt;} /&gt;
            &lt;Route path = "/contribute" element = {&lt;Contribute /&gt;} /&gt;
            &lt;Route path = "/about" element = {&lt;About /&gt;} /&gt;
            &lt;Route path = "/contact" element = {&lt;Contact /&gt;} /&gt;
          &lt;/Routes&gt;
        &lt;/Router&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Screenshots</strong>
  <a href="https://i.stack.imgur.com/lZyvZ.jpg" rel="nofollow noreferrer">here is the website WITHOUT test in Navbar.js</a></p>
  <p><a href="https://i.stack.imgur.com/x8MWV.jpg" rel="nofollow noreferrer">here is the website WITH test in Navbar.js </a></p>